`

jQuery-File-Upload 使用，jQuery-File-Upload上传插件

jQuery-File-Upload 使用jQuery-File-Upload上传插件jQuery-File-Upload参数传递jquery文件上传插件蕃薯耀 
阅读更多

jQuery-File-Upload 使用，jQuery-File-Upload上传插件

 

================================

©Copyright 蕃薯耀 2018年9月26日

http://fanshuyao.iteye.com/

 

一、官网地址：

https://github.com/blueimp/jQuery-File-Upload

 

二、使用文档（参数说明）

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

 

三、浏览器支持（官网说明）

  • Google Chrome
  • Apple Safari 4.0+
  • Mozilla Firefox 3.0+
  • Opera 11.0+
  • Microsoft Internet Explorer 6.0+

 

四、jQuery-File-Upload 入门使用

 

1、最简单的使用方法：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>

 如果不使用iframe，jquery.iframe-transport.js文件可以不引用。

 

 

 

2、自定义使用

 

不显示文件选择框，只显示上传按钮

<a id="btnUploadMdbFile" href="javascript:;" class="plui-linkbutton" >上传mdb文件</a> 

<div style="display: none;">		
    <input id="inputUploadMdbFile" type="file" name="mdbFiles" />
</div>

 

控件初始化：

$(function(){
	
	$("#btnUploadMdbFile").click(function(){
		$("#inputUploadMdbFile").click();
	});
	
	//multiple 多选
	//input限制文件上传可以使用（IE9+）： accept="application/msaccess" accept="image/*"
	$("#inputUploadMdbFile").fileupload({
		url : "${pageContext.request.contextPath}/xxx/fileUploadAction.go?method=fileUpload",
		dataType: "json",
		//autoUpload: false,
		formData: {
			"dirPath" : "temp_dir/mdb/"
		},
		add: function(e, data){
			//var acceptFileTypes = /^(gif|jpe?g|png)$/i;
			var acceptFileTypes = /^mdb$/i;
			var files = data.originalFiles;
			if(files && files.length > 0){
				var isPass = true;
				for(var i=0; i<files.length; i++){
					var name = files[i]["name"];
					var lastIndex = name.lastIndexOf(".");
					if(lastIndex < 0){
						isPass = false;
						break;
					}else{
						var fileType = name.substring(lastIndex + 1);
						if(!acceptFileTypes.test(fileType)){
							isPass = false;
							break;
						}
					}
				}
				if(!isPass){
					top.$.messager.alert("系统提示","只能上传*.mdb文件","info"); 
					return;
				}
				data.submit();
			}
		},
		done: function(e, data){
			//alert($.toJSON(data.result));
			if(data.result && data.result.files && data.result.files.length > 0){
				var file = data.result.files[0];
				if(file.suffix == ".mdb"){
					dealMdbFile(file.absolutePath);
				}else{
					top.$.messager.alert("系统提示","只能上传*.mdb文件","info"); 
				}
			}
		}
	});
	
});

 

formData：可以传递自己的参数。

add: function(e, data){}：增加控制文件的类型限制，这个可以省略。

done: function(e, data){}：上传成功后结果返回处理。

 

更多参数设置见：

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

 

 

================================

©Copyright 蕃薯耀 2018年9月26日

http://fanshuyao.iteye.com/

 

 

 

 

 

 

 

1
顶
0
踩
分享到：
| Java Spring文件上传，Java文件上传，Java ...
评论
1 楼 蕃薯耀 2018-09-26  
jQuery-File-Upload 使用，jQuery-File-Upload上传插件，jQuery-File-Upload参数传递，jquery文件上传插件

=========
蕃薯耀
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics