使用javascript、scala（无PHP）上传带有预览的图像

我试图实现一个图像上传与预览它。但也有人认为它不起作用。我在谷歌上搜索过，但似乎找不到任何解决方案

我的scala（html）类似于：

<div class="fileupload fileupload-new" data-provides="fileupload">
    <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
        <img src="@currentImage" alt="image upload area for @field.name" data-src="holder.js/100%x100%" />
    </div>
    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
    <div>
        <input type="file" name="@field.name" id="@id"/>
   </div>
</div>

我的Javascript

Fileupload.prototype = {

   listen: function() {
     this.$input.on('change.fileupload', $.proxy(this.change, this));
     if (this.$remove) this.$remove.on('click.fileupload', $.proxy(this.clear, this));
   },

   change: function(e, invoked) {
     var file = e.target.files !== undefined ? e.target.files[0] :   (e.target.value ? { name: e.target.value.replace(/^.+\\/, '') } : null);
     if (invoked === 'clear') return;

     if (!file) {
       this.clear();
       return;
     }

     this.$hidden.val('');
     this.$hidden.attr('name', '');
     this.$input.attr('name', this.name);

  if (this.type === "image" && this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match('image.*') : file.name.match('\\.(gif|png|jpe?g)$')) && typeof FileReader !== "undefined") {
    var reader = new FileReader();
    var preview = this.$preview;
    var element = this.$element;

    reader.onload = function(e) {
      preview.html('<img src="' + e.target.result + '" ' + (preview.css('max-height') != 'none' ? 'style="max-height: ' + preview.css('max-height') + ';"' : '') + ' />');
      element.addClass('fileupload-exists').removeClass('fileupload-new');
    };

    reader.readAsDataURL(file);
  } else {
    this.$preview.text(file.name);
    this.$element.addClass('fileupload-exists').removeClass('fileupload-new');
  }
},

clear: function(e) {
  this.$hidden.val('');
  this.$hidden.attr('name', this.name);
  this.$input.attr('name', '');
  this.$input.val(''); // Doesn't work in IE, which causes issues when selecting the same file twice

  this.$preview.html('');
  this.$element.addClass('fileupload-new').removeClass('fileupload-exists');

  if (e) {
    this.$input.trigger('change', [ 'clear' ]);
    e.preventDefault();
  }
},

trigger: function(e) {
  this.$input.trigger('click');
  e.preventDefault();
}
 };

Fileupload.prototype={
听：函数（）{
this.$input.on（'change.fileupload'，$.proxy（this.change，this））；
如果（this.remove）this.remove.on（'click.fileupload'，$.proxy（this.clear，this））；
},
更改：函数（e，已调用）{
var file=e.target.files！==未定义的？e.target.files[0]：（e.target.value？{name:e.target.value.replace（/^.+\\/，''）}:null）；
if（调用=='clear'）返回；
如果（！文件）{
这个.clear（）；
返回；
}
此.$hidden.val（“”）；
此.$hidden.attr（'name'，''）；
this.$input.attr（'name'，this.name）；
如果（this.type==“image”&&this.preview.length>0&&（typeof file.type！==“undefined”？file.type.match（'image.*'）：file.name.match（'\\（gif | png | jpe？g）$）&&typeof FileReader！==“undefined”）{
var reader=new FileReader（）；
var preview=此。$preview；
var元素=此.$element；
reader.onload=函数（e）{
html（“”）；
element.addClass（'fileupload-exists'）。removeClass（'fileupload-new'）；
};
reader.readAsDataURL（文件）；
}否则{
这是.preview.text（file.name）；
这是。$element.addClass（'fileupload-exists'）。removeClass（'fileupload-new'）；
}
},
清除：功能（e）{
此.$hidden.val（“”）；
this.$hidden.attr（'name'，this.name）；
这是。$input.attr（'name'，''）；
此.$input.val（“”）；//在IE中不起作用，这会导致在两次选择同一文件时出现问题
这是.$preview.html（“”）；
这是。$element.addClass（'fileupload-new'）。removeClass（'fileupload-exists'）；
如果（e）{
这个.input.trigger（'change'，['clear']）；
e、 预防默认值（）；
}
},
触发器：函数（e）{
此.input.trigger（'click'）；
e、 预防默认值（）；
}
};

问题是，图像（文件）正在上载，但预览未显示。

---

谁能帮我一下吗。谢谢。

以下是纯js中上传和预览img的基本示例：

document.getElementById（“本地”）.onchange=function（）{
var img=document.createElement（“img”），
reader=newfilereader（）；
img.file=this.files[0]；
reader.onload=（函数（aImg）{
返回函数（img）{
aImg.src=img.target.result；
文件.正文.附件（aImg）；
}
})（img）；
reader.readAsDataURL（img.file）；
}

---

是，但我不确定如何修改代码以使其正确工作。请尝试像我的示例中那样重写render.onload方法。带返回函数的自调用函数。