如何将已通过 JS 上传的图像添加到要从其上传的表单中？

Posted 2023-05-09

【中文标题】如何将已通过 JS 上传的图像添加到要从其上传的表单中？

【英文标题】：How do I add an image that has been uploaded via JS to the form it is being uploaded from?

【发布时间】：2017-03-30 06:58:09

【问题描述】：

我知道标题有点时髦，但我想做的是这个。

我有一个表单，在 type=file 字段上，我正在使用 jquery-fileupload 执行 .fileupload。

所以上传过程运行良好，但我面临的问题是，一旦上传完成......基本上我希望它附加到这个 html 字段：

<input class="col-lg-4 form-control" type="file" name="profile[avatar]" id="profile_avatar">

这是我的 JS（为简洁起见）：

$("[type=file]").fileupload(
done: function(e, data)     
        data.progressBar.remove();

        var image = 
          id: data.formData.key.match(/cache\/(.+)/)[1],
          storage: 'cache',
          metadata: 
            size: data.files[0].size,
            filename: data.files[0].name.match(/[^\/\\]+$/)[0],
            mime_type: data.files[0].type
          
        

        $('<img src="' + image.metadata.filename + '">').insertAfter($(this))    
      
  );

在此操作后生成以下 HTML：

<input class="col-lg-4 form-control" type="file" name="profile[avatar]" id="profile_avatar">
<img src="Awesome-Image-1.jpg">

然后在我的控制台中产生以下错误：

Awesome-Image-1.jpg:1 GET http://localhost:3000/profiles/Awesome-Image-1.jpg 404 (Not Found)

所以基本上我想获取存储在cache 中的image 对象并将其显示在input 字段的正上方——这样用户就可以看到他们上传的图像。我不想完全删除 input 字段。

编辑 1

所以为了清楚起见，我并不想访问已上传到服务器的图像。我正在尝试访问作为 var image 中对象的图像。

这是本地变量 image 的 JS 对象，在控制台中访问：

Object id: "8b455ab4155a6bd0e16e4f4c62165b4b.jpg", storage: "cache", metadata: Object

这是完整的对象：

Objectid: "8b455ab4155a6bd0e16e4f4c62165b4b.jpg"metadata: Objectfilename: "Awesome-Image-1.jpg"mime_type: "image/jpeg"size: 65715__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: __proto__()set __proto__: __proto__()storage: "cache"__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: __proto__()set __proto__: __proto__()

那么我该如何获取 image 对象，并将其放入表单中的 <img> 标记中，以便显示存储在缓存中的图像？

【问题讨论】：

您能否提供指向.fileupload() 插件文档的链接？

您正在查看由服务器提供的页面，对吧？您不能在远程提供的页面上显示本地图像 - 浏览器不允许 - 您也不希望 - 您需要确保图像已上传并存储在正确的位置。所以<img> 元素的src 属性需要是上传 图像的URL。我在代码中看不到服务器通知客户端图像 URL 的任何地方。

@Roamer-1888 这是插件 - github.com/blueimp/jQuery-File-Upload -- 回复：您的其余评论，我将更新问题的更多细节。

是什么让你觉得图片被缓存了，又是什么让你觉得可以直接从缓存中读取呢？你在某处读过这个吗？如果有，在哪里？

【参考方案1】：

试试这个

HTML

<input class="col-lg-4 form-control" type="file" name="profile[avatar]" id="tile-image">
        <img class="img-thumbnail" src=""> 

javascript

function readURL(input) 
                if (input.files && input.files[0]) 
                    var reader = new FileReader();

                    reader.onload = function (e) 
                        $('.img-thumbnail').attr('src', e.target.result);
                    

                    reader.readAsDataURL(input.files[0]);
                
            

关于文件输入的改变

    $("#tile-image").change(function () 
                readURL(this);
               //your upload code here
            );

【讨论】：

这与我在问题中输入的代码有何关系？请注意，我不需要按照我的问题中的方式呈现我的 HTML。我只是希望它以我想要的方式工作（在我的input 字段上方的图像）。这个响应似乎与我的实现一致，这可能不是最好的方法。

据我了解，您希望在上传之前显示您正在上传的图片。对吧？上面的代码会在你上传之前显示你要上传的图片

@marcamillion 让我再试一次

我已经成功上传了一个包含我的代码的文件，它存储在我的本地变量image中。我想要做的是将image 放入我的表单并将其渲染为图像。忽略上传部分，因为我已经处理好了。

如果您使用 URL.createObjectURL 而不是使用 FileReader，您将获得更快的性能和更少的代码：jsfiddle.net/fdzmd4mg/1