Question

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

我有一个表单，在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)

所以基本上我想采用存储在image中的cache对象并将其显示在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>标记中的表单中，以便显示存储在缓存中的图像？

Answer 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
            });

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

1 个答案: