【问题标题】:upload image using ajax使用ajax上传图片
【发布时间】:2012-10-12 23:57:32
【问题描述】:

我有以下 html 表单。在这里,图像上传工作正常。但我想在 ajax 中上传图像,以便在提交带有其他详细信息的表单之前。图片的预览可以在侧面显示。

<form action="<?=base_url();?>index.php/insert/insertdata" method="post" enctype="multipart/form-data">

        <tr><td><b>Title: </b></td><td><input type="text" name="title"/></td></tr>
        <tr><td><b>Url: </b></td><td><input type="text" name="url"/></td></tr>

        <tr><td><b>Image: </b></td><td><input type="file" name="image"></td></tr>

        <tr><td><b>Status: </b></td><td><select name="status"><option value="visible">Visible</option><option value="invisible">Invisible</option></select></td></tr>  

        <tr><td><input type="submit" value="submit"/></td><td><input type="reset" value="reset"/></td></tr>
    </form>

jquery 也很受欢迎。但我想避免再次使用表单标签。

【问题讨论】:

    标签: php codeigniter jquery file-upload


    【解决方案1】:

    上传图片后,使用 url 获取图片名称并添加到

    $.ajax(url,{data},function(res){
    
            //check status if it is 200 then assign the res to the img
           $('#img').attr('src',res);
    
    })
    

    //Html在图片文件后面写这个

     <img src="" id="img">
    

    【讨论】:

    • 当我上传图片时,我的页面正在刷新...我想上传而不刷新页面。
    • $target_path = "uploads/"; $target_path = $target_path . basename( $_FILES['image']['name']); if(move_uploaded_file($_FILES['image']['tmp_name'], $target_path)) { echo "The file ". basename( $_FILES['image']['name'])." has been uploaded"; } else { echo "There was an error uploading the file, please try again!"; }
    【解决方案2】:

    如果 jquery 受到欢迎,那么没有比 uploadify 更好的解决方案了。使用它,你会爱上它。还要检查demo

    【讨论】:

    • uplodify 使用表单标签,正如我在问题“但我想避免再次使用表单标签”中所描述的那样。我的表单中有图像输入标签。所以我不能在表单标签中有另一个表单标签。
    • 谁说您需要使用其他表单?您可以使用相同的表格,仅此而已:-)
    • uploadify 不起作用。我不想使用 flash 或 html5。进一步 uploadify 不显示预览。这不仅仅是上传文件。我也希望将文件名存储在数据库中。
    猜你喜欢
    • 2021-09-05
    • 2015-07-21
    • 2020-07-04
    • 1970-01-01
    • 1970-01-01
    • 2017-06-05
    • 2017-06-04
    • 2010-12-06
    相关资源
    最近更新 更多