jsp页面实现图片上传并预览

Question

前端实现多图片上传，并分开放到不同位置，点击预览按钮实现图片预览的功能，怎么实现

Answer 1

addOneImgByUploadFile: function(e){ var _self = this; var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;         for (var i = 0, len = files.length; i < len; ++i) {             var file = files[i];             if (url) {                 src = url.createObjectURL(file);             } else {                 src = e.target.result;             }             var file = $("#uploaderInput").val();             var fileName = _self.getFileName(file);      $("#uploadFileName").val(fileName);           _self.startUpload().done(function(res){      if(res.status == 'success'){      _self.showUploadSuccess();      var url = res.url;              _self.$uploaderFiles.append($(_self.tmpl.replace('#url#', src).replace("#value#", url)));              _self.changeProgress(_self.getCurrentCount());      }else{      _self.showUploadError("上传失败");      }      }).fail(function(res){      _self.showUploadError("上传失败");      }).then(function(){      _self.checkEnabled();      });                      } }, startUpload: function(){ showLoading("上传中..."); var formDate = new FormData(this.$uploaderInput.closest("form")[0]); return $.ajax({ url: uploadImgUrl, type: 'post', cache: false, data: formDate, dataType: 'json', processData: false, contentType: false, }); },昨天写的前端添加一张图片时的一个显示预览的方法，供你参考

Answer 2

鉴于时间关系，就不一一详解了，前端可以使用html5的formDate对象，并使用js的一些url特性来进行上传前预览。