plupload 利用ajax方式上传文件

需要引入  plupload.full.min.js

自己构造方法uploadJs.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript">
var uploader = null;
var lastFile = null;
var clear = false;
var fileArray = [];
/*
 *======data数据=====
 * buttonId  触发文件选择对话框的按钮，为那个元素id
 * spanId   用来显是信息的标签
 * fileTypes  允许上传的文件类型  例如："bmp,jpg,jpeg,gif,png"
 * uploadUrl  上传的服务器地址
 * multiSelection  是否可以选择多个文件
 * multipartParams  上传时的附加参数，以键/值对的形式传入
 * uploadImmed 选择文件后立即上传
 * buttonId, spanId, fileTypes, uploadUrl, multiSelection, multipartParams, uploadImmed
 *=====data====
 * commit  文件上传成功后的回调方法
 */
function initUploadMultipilePlugin(config, commit) {
	uploader = null;
	lastFile = null;
	fileArray = [];
	var mimeTypes = [];
	if(config.fileTypes != null && config.fileTypes != ""){
		mimeTypes = [ 
          { title : "files", extensions : config.fileTypes }
        ];
	}
	uploader = new plupload.Uploader({
		browse_button : config.buttonId, //触发文件选择对话框的按钮，为那个元素id
        url : config.uploadUrl, //服务器端的上传页面地址
        filters: {
        	mime_types : mimeTypes,
        	max_file_size : '102400kb', //最大只能上传100M的文件
        	prevent_duplicates : true //不允许选取重复文件
        },
        multi_selection: config.multiSelection,//是否可以选择多个文件
        multi_upload: config.multiUpload,//是否一次上传多个文件
        file_data_name: 'upload',//指定文件上传时文件域的名称
        multipart_params: config.multipartParams  //上传时的附加参数，以键/值对的形式传入
	});
	
	uploader.init();
	
	uploader.bind('FilesAdded', function(uploader, files){
		if (clear) {
    		$("#"+config.spanId).html("");
    		fileArray = [];
    		clear = false;
    	}
    	if(!config.multiUpload && uploader.files.length > 1){
    		uploader.removeFile(files[0]);
    	}
		plupload.each(files, function(file) {
			var tmp = $("#"+config.spanId).html();
			$("#"+config.spanId).html(tmp + "<div id='"+file.id+"'>" + file.name + " 等待上传("+plupload.formatSize(file.size)+")");
			lastFile = file.id;
		});
		if(config.uploadImmed){
			uploader.start();
		}
	});
	
	uploader.bind('FilesRemoved', function(uploader, files){
		$("#"+config.spanId).html("");
	});
	
	uploader.bind('Error', function(uploader, err){
		$("#" + err.file.id).html(err.file.name + " 上传错误,错误码:" + err.code + ",错误信息：" +err.message);
		if (lastFile == err.file.id){
			clear = true;
    		lastFile = null;
    		commit();
		}
	});
	
	uploader.bind('UploadProgress', function(uploader, file){
		$("#" + file.id).html(file.name + " 上传中...上传进度:" + file.percent +"%");
	});
	
	uploader.bind('FileUploaded', function(uploader, file, res){
		var result = JSON.parse(res.response);
		if (result.success) {
			$("#" + file.id).html(file.name + " 上传成功");
			var obj = new Object();
			obj.newFileName = result.newFileName;
			obj.oldFileName = result.oldFileName;
			obj.filePath = result.filePath;
			obj.webUrl = result.webUrl;
			fileArray.push(obj);
		} else {
			$("#" + file.id).html(file.name + " " + result.msg);
		}
	});
	
	uploader.bind('UploadComplete', function(uploader, files){
		clear = true;
		lastFile = null;
		commit();
	});
}
	

function deleteAttach(attachId) {
	layer.confirm("一旦删除不能恢复哦...确定删除该附件?", {
	    btn: ["确定","取消"], //按钮
	    shade: 0.1 //显示遮罩
	}, function(){
		msg("正在处理中...");// 为了让对话框马上消失
		$(".btn-default").button('loading');
		$(".btn-primary").button('loading');
		$(".btn-link").button('loading');
		var url = "${ctx}/web/file/delete";
		$.ajax( {
			url : url,
			type : 'post',
			data : {
				attachId: attachId
			},
			dataType : 'text',
			timeout : 60000,
			error : function(e) {
				$(".btn-link").button('reset');
				$(".btn-default").button('reset');
				$(".btn-primary").button('reset');
				msgs("连接服务器超时,请稍后再试.");
			},
			success : function(result) {
				if (!isOutTime(result)) {
					$(".btn-link").button('reset');
					$(".btn-default").button('reset');
					$(".btn-primary").button('reset');
					result = JSON.parse(result);
					if (result.success) {
						msg(result.msg);
						$("#"+attachId+"_pic").remove();
					} else {
						msgs(result.msg);
					}
				}
			}
		});
	});
}
</script>

 

调用方法为：

<button id="selectFile" class="btn btn-link" type="button" data-toggle="button" data-loading-text="<i class='icon-pencil'></i>&nbsp;修改附件"><i class="icon-pencil"></i>&nbsp;修改附件</button>

   			<span class="help-block" id="selectFileName"></span>

 

var config = {
			"uploadUrl": "${ctx}/web/file/upload",
			"spanId": "selectFileName",
			"uploadImmed": false,
			"multiSelection": false,
			"buttonId": "selectFile",
			"multiUpload": false,//只允许上传一个附件
			"fileTypes": "jpg,jepg,gif,bmp,png"
		};
		initUploadMultipilePlugin(config, commitEdit);

 

需要注意的是各个参数的含义

commitEdit为callback函数，表数据保存在callback函数中执行。