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> 修改附件"><i class="icon-pencil"></i> 修改附件</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函数中执行。
相关推荐
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05
坚持着执着 2020-07-05