plupload上传例子

2024-05-29 06:12:34

首先引入js

<script type="text/javascript" src="${basepath}/common/js/plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="${basepath}/common/js/plupload/jquery.plupload.queue.min.js"></script>
<script type="text/javascript" src="${basepath}/common/js/plupload/zh_CN.js"></script>

页面的容器设置和列表

<p id="container1">
       <label><span style="color:red">*</span>  营业执照：</label>
       <input type="button" value="选择上传文件" id="adduploadfiles1"/>
       <span class="msg-box" for="licensePath"></span>
       <input type="hidden" name="licensePath" id="licensePath" value="${companyActiveInfo.licensePath }"/>
      </p>
      <div id="filelist1" class="data_sc data_sc1">

upload.js代码

var uploader = new plupload.Uploader({
   runtimes : 'html5,flash,silverlight,html4',
   browse_button : 'adduploadfiles1', // you can pass in id...
   container: document.getElementById('container1'),
   url : getRootPath()+'/userspace/mymessage/fileUploads!fileUploads.action',
   flash_swf_url : '../js/Moxie.swf',
   silverlight_xap_url : '../js/Moxie.xap',
   unique_names:true,
   multipart_params:{uploadparam:"licensePath"},
   filters : {
       max_file_size : '5mb',
       mime_types: [
           {title : "Image files", extensions : "jpg,gif,png"},
           {title : "Zip files", extensions : "zip"}
       ]
   },
   init: {
       PostInit: function() {
           document.getElementById('touploadfile1').onclick = function() {
               var count=uploader.files.length;
               if(count>1){
                   alert("最多只能上传一个");
               }else if(count==0){
                   alert("没有要上传的文件");
               }else{
                   uploader.start();
               }
               return false;
           };
       },
       FileUploaded: function(up, file,callback) {
            var oldpath=$.trim($("#licensePath").val());
            var backparam=callback.response.replace(/\"/g, "");//ajax回调值
            $("#licensePath").val(oldpath+backparam+";");
            $("#down"+file.id).prop("href","javascript:downloadfile('"+backparam+"');");
            $("#del"+file.id).prop("href","javascript:delthisuploadfile('"+file.id+"','"+backparam+"',1)");
        },
       FilesAdded: function(up, files) {
           plupload.each(files, function(file) {
               var oldobj=document.getElementById("p_"+ file.id);
               var myTempFileName=file.name;
               if(myTempFileName.length>20){
                   deluploadfile(file.id,1);
                   alert("您上传文件"+myTempFileName+"的文件名长度大于20,请修改");
                   return ture;
               }
               if(oldobj==null ||oldobj==undefined)
                document.getElementById("filelist1").innerHTML+='<p class="clearfloat" id="p_' + file.id + '"><var><a href="javascript:downloadfile(\'\');" id="down'+file.id+'" title="'+file.name+'">' +
                getLengthName(file.name) + ' </a>(' + plupload.formatSize(file.size) + ')<b></b></var><a href="javascript:delthisuploadfile(\''+file.id+'\',\'\',1);" id="del'+file.id+'">删除</a><span id="error_'+file.id+'"></span>';
           });
       },

UploadProgress: function(up, file) {
           document.getElementById("p_"+file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
       },
       UploadComplete:function(up,files){
       },
       Error: function(up, err) {
           var errcode=err.code;
           if(errcode==-600 ){
               alert(err.file.name+"文件大小已超过5Mb,请重新选择上传");
           }else if( errcode==-601 ){
               alert(err.file.name+"文件格式错误,请重新选择上传");
           }else{
               $("#error_"+err.file.id).text(err.message+" 请删除，重新上传");
           }
       }
   }
});

uploader.init();

//删除操作

function delthisuploadfile(fileid,delid,deltype){
   if(confirm("是否要删除该文件?")){
       if(delid!=null && delid!=''){
           var oldids=$.trim($("#delfileids").val());
           $("#delfileids").val(oldids+$.trim(delid)+";");
       }
       var toremove='';
       if(deltype==1){
           for(var i in uploader.files){
               if(uploader.files[i].id === fileid){
                   toremove = i;
               }
           }
           uploader.files.splice(toremove, 1);
           var oldpath=$.trim($("#licensePath").val());
           var now=oldpath.replace((delid+";"),"");
           $("#licensePath").val($.trim(now));
       }else{
           for(var i in uploader2.files){
               if(uploader2.files[i].id === fileid){
                   toremove = i;
               }
           }
           if(toremove!="")
               uploader2.files.splice(toremove, 1);
           var oldpath=$.trim($("#taxformPath").val());
           var now=oldpath.replace(delid+";","");
           $("#taxformPath").val($.trim(now));
       }
       $("#filelist"+deltype).find("p[id='p_"+fileid+"']").remove();
       alert("已删除");
   }
}

但是发现在IE7和IE8好像选择文件错误，

SCRIPT601: 未知的运行时错误
plupload.full.min.js, 行15 字符10326，不知道怎么解决。

plupload上传例子相关推荐

plupload上传大文件
大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要 ...
plupload上传整个文件夹
大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要 ...
利用PLUPLOAD上传大文件
利用PLUPLOAD上传大文件大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三 ...
plupload上传插件绑定事件的两种方法
在经受一天的磨难之后终于找到处理事件方法: 先引用: <script src="js/plupload.full.min.js" type="text/javasc ...
Plupload上传插件中文文档
Plupload上传插件中文帮助文档如有疑问,加群交流:646104701 下载地址:https://www.plupload.com/download/ 配置参数实例化一个plupload对象时 ...
Plupload 上传详细讲解，Plupload 多实例上传，Plupload多个上传按钮
Plupload 上传详细讲. Plupload 多实例上传. Plupload 多个上传按钮. Plupload 上传成功获取返回值. DEMO: <!DOCTYPE html> ...
Plupload上传插件中文帮助文档
Plupload上传插件中文帮助文档配置参数实例化一个plupload对象时,也就是 new plupload.Uploader(),需要传入一个对象作为配置参数.后面内容中出现的plupload ...
Plupload 上传控件使用指南
本文转载至(感谢原作者分享):http://www.cnblogs.com/2050/p/3913184.html#plupload_doc2 我之前写过一篇文章<文件上传利器SWFUpload ...
Plupload上传插件详解，多实例上传
我们来看一个比较全的 Plupload Demo <!DOCTYPE html> <html> <head> <meta charset="UT ...

最新文章

热门文章