使用plupload.js上传文件

1、引入js文件

2、html文件

<input id="filecomment" class="data_sc data_sc1"  type="hidden">
<span class="choseFile"><input type="button" name="" id="browse" value="选取文件" />
</span>

<button id="start_upload">开始上传</button>

3、js初始化上传控件

//初始化上传控件
var uploader = new plupload.Uploader({browse_button : 'browse',url : url,//对应的文件上传的后台路径max_file_size: '20mb',//限制为20MBfilters: {mime_types: [ //只允许上传图片文件{ title: "Excle文件", extensions: "xls,xlsx" }]}
});
uploader.init();//这句必须有//文件添加时的事件
uploader.bind('FilesAdded', function (uploader, files) {var file = files[0];document.getElementById("filecomment").innerHTML+='<p class="clearfloat" id="p_' + file.id + '"><var><a       href="javascript:downloadfile(\'\');" id="down'+file.id+'" title="'+file.name+'">' +' </a>(' + plupload.formatSize(file.size) + ')<b></b></var><span id="error_'+file.id+'"></span>';
});
//开始上传
document.getElementById('start_upload').onclick = function(){if(document.getElementById("filecomment").text==''){layer.msg("请选择附件后上传!");return;}var name = $("#userName").val();if (name == "" || name == null) {layer.msg("真实姓名不能为空");return;} else if (name.length > 20) {layer.msg("姓名不能超过20位");return;}uploader.start();
}
uploader.bind('BeforeUpload', function (uploader, files) {var file = files[0];
//修改url向后台传参数uploader.settings.url = url + "/saveFiles?file="+ $("#filecomment").val();
});// 完成上传完了，成功或者失败，先删除进度条。
uploader.bind( 'uploadComplete', function( file ) {layer.msg("上传完成!");currobj.showreportview(currobj.options.experimentId);
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.bind( 'Error', function( uploader,errObject  ) {var errcode=errObject.code;if(errcode==-600 ){//alert(err.file.name+"文件大小已超过5Mb,请重新选择上传");layer.msg(errObject.file.name+"文件大小已超过20Mb,请重新选择上传");}else if( errcode==-601 ){//alert(err.file.name+"文件格式错误,请重新选择上传");layer.msg(errObject.file.name+"文件格式错误,请选择Excle格式的文件后重新上传");}else{$("#error_"+errObject.file.id).text(errObject.message+" 请删除，重新上传");}
});

使用plupload.js上传文件相关推荐

七牛云 vue 图片上传简单解说，js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片一.七牛云简介首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
js上传文件到c 服务器,js上传文件到c服务器
js上传文件到c服务器内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据 ...
风尚云网学习-H5+css3+js上传文件页面提交不跳转
风尚云网学习-HTML+原生js上传文件页面提交不跳转页面效果图: 众所周知,from表单提交后会自动跳转url, 此时我们可以用一个空的frame 接收,阻止跳转废话不多说,上全部代码: < ...
[原创]使用ajaxFileUpload.js上传文件时附带额外参数。
最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...
纯js上传文件很好用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
html表单调用js文件上传,简单实现js上传文件功能
本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下一.用input完成上传,效果图如选择文件后,提交后出现图片url 二.传输格式采用form-data形式. html代 ...
Node.js 上传文件(multiparty包) (基于express)
文件上传.js: //文件上传插件的使用 multiparty包 /* body-parser包只能处理post请求,不能上传图片. multiparty包post请求和文件都可以处理 1.cnpm ...
使用jquery.fileupload.js上传文件时添加进度条
1.首先页面用来展示上传按钮和显示进度条的 <tr><td style="width:140px;text-align: right;padding-top: 13px ...
C#结合js 上传文件和删除文件(技术点有:asp.net mvc ,nhibernate,ajax等)
之前做项目的时候要用到上传文件的功能,现在我总结一下,上传文件和删除文件的代码,在以后的使用的过程中也更方便查找. [HttpPost]public ActionResult EditUser(){v ...

使用plupload.js上传文件

使用plupload.js上传文件相关推荐

最新文章

热门文章