关于上传文件的插件【jquery.upload.js/SWFUpload等】

最新推荐文章于 2020-07-02 15:04:29 发布

ww,

最新推荐文章于 2020-07-02 15:04:29 发布

阅读量717

点赞数

本文链接：https://blog.csdn.net/weixin_42385438/article/details/103201372

版权

记录一下几个比较常用的上传插件：

1.jquery.upload.js
1.SWFUpload
3.uploadify
4.ajaxupload.js

以下简单介绍一下前两种

1.jquery.upload.js简介及应用：

jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频。

支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.），支持标准的HTML表单文件上传。

操作流程：

(1).引入配置参数js

<!--引入上传配置参数js -->
<script src='upload-bulk.js'></script>

(2).页面样式及javaScript

//按钮
<input id="uploadFile" class="uploadFile" type="file" name="uploadFile" multiple style="display: none" /> 

//JavaScript
<script>
    var flag = true;
    $("#uploadFile").click(function(){			   
		 if(flag){//只需初始化一次	
   			
             //后台上传方法,后面可接参数
			 var url="${pageContext.request.contextPath}/***?XXX=***";
			 bulkUpload(url);//引用步骤1中配置文件js里的方法
			 flag = false;      
        }		
	});


</script>

(3).配置参数js及引入所需其他js

//如果像此步骤将配置参数单独分离成js，那么需要再此js文件中
//使用document.write()文档流，引入需要的其他js文件。

var localObj = window.location;
var contextPath = localObj.pathname.split("/")[1];
var basePath = localObj.protocol+"//"+localObj.host+"/"+contextPath;
document.write("<script language='javascript' src='"+basePath+"/jquery-file-upload/js/vendor/jquery.ui.widget.js' ></script>");// jQuery UI Widget
document.write("<script language='javascript' src='"+basePath+"/jquery-file-upload/js/jquery.iframe-transport.js' ></script>");//扩展iframe数据传输
document.write("<script language='javascript' src='"+basePath+"/jquery-file-upload/js/jquery.fileupload.js' ></script>");// jQuery File Upload核心类
document.write("<script language='javascript' src='"+basePath+"/jquery-file-upload/js/jquery.fileupload-process.js' ></script>");
document.write("<script language='javascript' src='"+basePath+"/jquery-file-upload/js/jquery.fileupload-validate.js' ></script>");

//js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题


function bulkUpload(url){
	$('#uploadFile').fileupload({
		url : url,//请求发送的目标地址
		Type : 'POST',//请求方式 ，可以选择POST，PUT或者PATCH,默认POST
		//dataType : 'json',//服务器返回的数据类型
		autoUpload : false,
		acceptFileTypes : /^gif|jpe?g|png|doc|docx|xls|xlsx|pdf|txt$/i,//验证文件格式
		maxNumberOfFiles : 10,//最大上传文件数目
		maxFileSize : 100*1024*1024, //上限100MB --10000000  文件上限10MB   
		minFileSize : 100,//文件下限  100b
		messages : {//文件错误信息
			acceptFileTypes : '文件类型不匹配',
			maxFileSize : '文件过大',
			minFileSize : '文件过小'
		}
	})
	//文件添加完成后触发的事件
	.on("fileuploadadd", function(e, data) {
		//validate(data.files[0])这里也可以手动来验证文件格式和大小
		
		//隐藏或显示页面元素
		$('#progress .bar').css( 
		    'width', '0%'
		  );
		$('#progress').hide();
		$("#chooseFile").hide();
		$("#startUpload").show();
		$("#rechooseFile").show();
		
		
		var fileName="<tr><td>"+data.files[0].name+"</td></tr>";
		$("#tableFiles tr:last").after(fileName);
		$("#tableFiles").show();
		//绑定开始上传事件
		$('#startUpload').click(function() {
			$("#startUpload").hide();
			jqXHR = data.submit();
			//解绑，防止重复执行
			$("#startUpload").off("click"); 
		})
		
		//绑定点击重选事件
		$("#rechooseFile").click(function(){
			$("#uploadFile").click();
			//解绑，防止重复执行
			$("#rechooseFile").off("click"); 
		})
	})
	//当一个单独的文件处理队列结束触发(验证文件格式和大小)
	.on("fileuploadprocessalways", function(e, data) {
		//获取文件
		file = data.files[0];
		//获取错误信息
		if (file.error) {
			console.log(file.error);
			$("#startUpload").hide();
		}
	})
	//显示上传进度条
	.on("fileuploadprogressall", function(e, data) {
		$('#progress').show();
		 var progress = parseInt(data.loaded / data.total * 100, 10); 
		  $('#progress').css( 
		   'width','15%'
		  ); 
		  $('#progress .bar').css( 
		   'width',progress + '%'
		  ); 
	})
	//上传请求失败时触发的回调函数
	.on("fileuploadfail", function(e, data) {
		console.log(data.errorThrown);
	})
	//上传请求成功时触发的回调函数
	.on("fileuploaddone", function(e, data) {
		var result=data.files[0].name+" 上传完成!<br>";
		$("#divStatus").append(result);
		var fileInfo = eval("("+data.result+")");
		//alert(fileInfo.fileName);
	})
	//上传请求结束后，不管成功，错误或者中止都会被触发
	.on("fileuploadalways", function(e, data) {

	})
}

2.SWFUpload简介及应用：

SWFUpload是一个flash和js相结合而成的文件上传插件，其功能非常强大。但是配置参数过多。

SWFUpload的特点：

1、用flash进行上传，页面无刷新，且可自定义Flash按钮的样式;
2、可以在浏览器端就对要上传的文件进行限制;
3、允许一次上传多个文件，但会有一个上传队列，队列里文件的上传是逐个进行的，服务器端接收文件时跟普通的表单上传文件是一样的;
4、提供了丰富的事件接口供开发者使用;

SWFUpload的文件上传流程：

1、引入相应的js文件
2、实例化SWFUpload对象，传入一个配置参数对象进行各方面的配置。
3、点击SWFUpload提供的Flash按钮，弹出文件选取窗口选择要上传的文件；
4、文件选取完成后符合规定的文件会被添加到上传的队列里；
5、调用startUpload方法让队列里文件开始上传；
6、文件上传过程中会触发相应的事件，开发者利用这些事件来更新ui、处理错误、发出提示等等；

SWFUpload包括三部分的内容：SWFUpload.js、swfupload.swf、初始化配置参数及各种事件处理函数。所以首先在页面引入SWFUpload.js

代码步骤：

(1).插入js

<!--上传配置文件js -->
<script src='upload-bulk.js'></script>

(2).页面按钮与javaScript

//按钮
<a id="uploadFile" class="float-right" href="javascript:void(0);"><i class="micon-upload-2"></i>上传文件</a>


//javaScript
<script>
    var flag = true;
    $("#uploadFile").click(function(){			   
		 if(flag){//只需初始化一次	
   			 var data={"XXX":***};//json格式数据源
			 var url="${pageContext.request.contextPath}/***";//后台上传方法
			 bulkUpload(url,data);//引用步骤1中配置文件js里的方法
			 flag = false;      
        }		
	});


</script>

(3).配置文件js内容

//如果像此步骤将配置参数单独分离成js，那么需要再此js文件中
//使用document.write()文档流，引入需要的其他js文件。

var localObj = window.location;
var contextPath = localObj.pathname.split("/")[1];
var basePath = localObj.protocol+"//"+localObj.host+"/"+contextPath;
document.write("<link rel='stylesheet' type='text/css' href='"+basePath+"/swfupload/css/default.css' />");
document.write("<script language='javascript' src='"+basePath+"/swfupload/swfupload.js' ></script>");
document.write("<script language='javascript' src='"+basePath+"/swfupload/swfupload.queue.js' ></script>");
document.write("<script language='javascript' src='"+basePath+"/swfupload/fileprogress-bulk.js' ></script>");
document.write("<script language='javascript' src='"+basePath+"/swfupload/handlers-bulk.js' ></script>");


var swfu;
     
function bulkUpload(url,data){
    var settings_object = {//定义参数配置对象
        upload_url : "http://www.swfupload.org/upload.php",//swfupload.swf插件路径
            flash_url : "url",//后台上传方法路径
            file_post_name : "data",//数据源
            post_params : {
           "post_param_name_1" : "post_param_value_1",
           "post_param_name_2" : "post_param_value_2",
           "post_param_name_n" : "post_param_value_n"
            },
            use_query_string : false,
            requeue_on_error : false,
            http_success : [201, 202],
            assume_success_timeout : 0,
            file_types : "*.jpg;*.gif",
            file_types_description: "Web Image Files",
            file_size_limit : "1024",//文件上传大小
            file_upload_limit : 10,
            file_queue_limit : 2,
 
            debug : false,
     
            prevent_swf_caching : false,
            preserve_relative_urls : false,
     
            button_placeholder_id : "element_id",
            button_image_url : "http://www.swfupload.org/button_sprite.png",
            button_width : 61,
            button_height : 22,
            button_text : "<b>Click</b> <span class="redText">here</span>",
            button_text_style : ".redText { color: #FF0000; }",
            button_text_left_padding : 3,
            button_text_top_padding : 2,
            button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,
            button_disabled : false,
            button_cursor : SWFUpload.CURSOR.HAND,
            button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
     
            swfupload_loaded_handler : swfupload_loaded_function,
            file_dialog_start_handler : file_dialog_start_function,
            file_queued_handler : file_queued_function,
            file_queue_error_handler : file_queue_error_function,
            file_dialog_complete_handler : file_dialog_complete_function,
            upload_start_handler : upload_start_function,
            upload_progress_handler : upload_progress_function,
            upload_error_handler : upload_error_function,
            upload_success_handler : upload_success_function,
            upload_complete_handler : upload_complete_function,
            debug_handler : debug_function,
    };
     
    swfu = new SWFUpload(settings_object);//实例化一个SWFUpload，传入参数配置对象
};
/*定义各种事件监听函数*/
function swfupload_loaded_function(){}
function file_dialog_start_function(){}
...等等

ww,

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于上传文件的插件【jquery.upload.js/SWFUpload等】

记录一下几个比较常用的上传插件：1.jquery.upload.js1.SWFUpload3.uploadify4.ajaxupload.js以下简单介绍一下前两种1.jquery.upload.js简介及应用：jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动...
复制链接

扫一扫