文件上传WebUploader

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+。

官网地址:http://fex.baidu.com/webuploader/

组件包

webuploader.min.js

Uploader.swf 注:使用FLASH上传时需要

注:点击上传按钮后,自动修改为禁止操作。只有在返回成功和请求错误是才可继续

实例演示

选择文件并上传

文件上传(文件):

文件上传(图片):

// 按钮形式的用于文件上传
<button id="btn_dy_upload" type="button" class="btn btn-sm btn-info js-dy-creation">选择并上传</button>

// 图片形式用于上传图片文件(width,height为显示区域的大小)
<img id="img_dy_upload" width="70" height="40" class="js-dy-creation"/>
/*
* @description 自定义原生上传
* @param {String} id 触发区域对象的 id,必填;
* @param {String} hide_id 选填,隐藏域对应的 id 及 name;
* @param {Object} option 方法的配置信息;
*/

var option = {
    serve_url:  string // 接口
    serve_name: string // 对应字段,默认: upload
    required: boolean // validate校验,默认:false
    isname: boolean // 文件名称是否显示,默认:false
    uptype: object // 后台用于区分存储类型,例: {'category' :'header'}
    filetype: array // 格式类型,例:['txt', 'png']
    filesize: number // 文件大小单位kb,默认:10MB,例:(10*1024)
    success: function(res, obj) // 请求成功时回调
}

注:
1. hide_id 可默认不填写时,input隐藏域的 id 及 name 按照 id_hide 形式生成。
2. 数据回显时,btn类型回显的数据填写按钮的 data-fpath 属性上,
   img 类型回显的数据填写在 src 上即可。
    
// 上传文件(按钮)  
COM_TOOLS._view.cusFileUpload('btn_dy_upload');

// 上传文件(图片)
COM_TOOLS._view.cusFileUpload('img_dy_upload');
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<link rel="stylesheet" href="../css/style.css" />
非组件文件上传

文件名称:

<p id="fileName4">文件名称:</p>
<div class="row">
	<div class="col-sm-12">
		<button id="selectBtn4" type="button" class="btn btn-sm btn-info">选择文件</button>
		<button id="upLoadBtn4" type="button" class="btn btn-sm btn-info">上传文件</button>
		<input id="inpFile4" class="hide-inp2" type="file"/>
	</div>		
</div>
基础:
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>

<script src="../js/plugins/layer/layer.js"></script>

公用:
<script src="../i18n/zh-CN.js"></script>
<script src="../js/subindex.js"></script>

/*DEMO4*/
$(function(){
	$('#selectBtn4').on('click',function(){
    	return $('#inpFile4').click();
    });
    $('#inpFile4').on('change',function(evt){
    	var files_ = evt.target.files[0];
    	$('#fileName4').text('文件名称:'+files_.name);
    });
    $('#upLoadBtn4').on('click',function(){
    	var dataF=new FormData();
    	// 'myFile' 为后台所接受该文件所对应的字段名
		dataF.append('myFile',$('#inpFile4')[0].files[0]);
    	$.ajax({
			type: 'POST',
			processData: false,	//必须
			contentType: false,	//必须
			url: '',	//上传路径
			data: dataF,
			success: function(data){
				console.log(data);
			}
		});
    });
});
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<link rel="stylesheet" href="../css/style.css"/>
webuploader组件并支持MD5校验
<div class="col-sm-12">
    <button id="selectBtn3" type="button" class="btn btn-sm btn-info">选择文件并上传</button>
    <input id="inpFile3" multiple="multiple" class="hidden" type="file"/>
</div>
//文件上传
var uploader2 = WebUploader.create({
    //swf文件路径
    swf: '${STATIC_PATH}/common/js/plugins/webUploader/Uploader.swf',
    //文件接收服务端。
    server: "${contextPath}/fileinfo/fileUpload",
    //开启MD5之后,必须关闭压缩(默认 false 不压缩,如开启需配置压缩质量:{quality: 90})
    compress: false,
    //文件类别,需要注意这里的上传类型
    formData: {'category' :'header'},
    //设置文件上传域的name
    fileVal: 'upload',
    // MD5校验,开启MD5之后必须关闭压缩
    needmd5: false,
    //验证文件总数量, 超出则不允许加入队列
    // fileNumLimit: 2
    //限制上传文件类型
    /* accept:{
         extensions: 'txt',
    } */
});
uploader2.on('fileQueued', function( file ) {
    COM_TOOLS.loadingBtn.open($('#selectBtn3'));
    if(uploader2.options.needmd5){
        this.md5File(file.source).fail(function(){
            COM_TOOLS.loadingBtn.close($('#selectBtn3'));
        }).then(function(ret) { // 处理完成后触发
            file.filemd5 = ret;
            uploader2.upload(file);
        });
    }else{
        uploader2.upload(file);
    }
}).on('uploadBeforeSend', function(block, data){
   data.md5 = block.file.filemd5;
}).on('uploadSuccess', function(file, re) {
    if(re._raw.state == 1){
        // 成功
    }else if(re._raw != 'ERROR'){
        // 失败
    }
    COM_TOOLS.loadingBtn.close($('#selectBtn3'));
}).on('error', function(type){
    if (type == 'Q_EXCEED_NUM_LIMIT') {
        COM_TOOLS.alert("文件数量超出限制");
    }
    if (type == 'Q_EXCEED_SIZE_LIMIT') {
        COM_TOOLS.alert("文件大小超出限制");
    }
    if (type == 'Q_TYPE_DENIED') {
        COM_TOOLS.alert("文件类型错误");
    }
    COM_TOOLS.loadingBtn.close($('#selectBtn3'));
});
/*选择与上传*/
$('#selectBtn3').on('click',function(){
    return $('#inpFile3').click();
});
$('#inpFile3').on('change',function(evt){
    uploader2.reset();
    var files_ = evt.target.files;
    if(files_){
        uploader2.addFiles(files_);
        if(uploader2.getFiles().length>0){
            $(this).val('');
        }
    }
});

                        
webuploader的多文件上传
<button id="btn_upload_mult" type="button" class="btn btn-sm btn-info js-dy-creation">选择并上传</button>
// 基础    
<script src="../js/plugins/webUploader/webuploader.min.js"></script>
// 组件
<script src="../js/plugins/webUploader/cus_uploader.js"></script>

/*
 * @description 多文件上传功能
 *   使用的 webupload 进行二次封装开发
 *   支持动态DOM结构替换
 *   支持 webupload 默认 opt
 * @param {String} id 所要替换的 button 对象的 id
 * @param {Object} option 方法的配置信息
 */

// 基础配置信息(非必填,带有默认值)
var opt = {
    formData: 用于判断文件的存储类型,例:{'category' :'xxx'}
    fileVal: 对应接收的字段,例:'upload'
    server: 后台数据接口
    accept:{
        extensions: 文件类型,例子:'jpg,jpeg,png,gif'
    }
    fileSizeLimit: 文件总大小限制
    fileNumLimit: 文件总数量限制(强制最多为10个)
}

// 多文件为并发上传,同时并发数为3
cus_mult_upload('btn_upload_mult');
// 组件
<link rel="stylesheet" href="../css/plugins/webUploader/cus_uploader.css"/>
webuploader的多文件上传(支持上传后预览、删除)
<input autocomplete="off" data-file_names="" 
value="https://www.baidu.com/img/bd_logo1.png,http://s1.sinaimg.cn/mw690/006wmg2Hzy73dot1Fug80" type="text"  id="js_upload_preview"/>
<script src="../js/plugins/webUploader/webuploader.min.js"></script>    
<script src="../js/plugins/webUploader/cus_uploader_preview.js"></script>

mult_upload_preview('js_upload_preview');
// 组件
<link rel="stylesheet" href="../css/plugins/webUploader/cus_uploader.css"/>
webuploader的多文件上传(支持上传后显示文件原名称、删除)
<input autocomplete="off" data-file_names="张三.txt|李四.txt" 
value="https://www.baidu.com/img/bd_logo1.png,http://s1.sinaimg.cn/mw690/006wmg2Hzy73dot1Fug80" type="text"  id="js_upload_preview_file"/>
<script src="../js/plugins/webUploader/webuploader.min.js"></script>    
<script src="../js/plugins/webUploader/cus_uploader_preview.js"></script>

mult_upload_preview('js_upload_preview_file');
// 组件
<link rel="stylesheet" href="../css/plugins/webUploader/cus_uploader.css"/>