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特性来进行上传前预览。