DWZ+Uploadify +JSON 多文件上传

最新推荐文章于 2017-01-11 10:15:40 发布

王姐

最新推荐文章于 2017-01-11 10:15:40 发布

阅读量1.1w

点赞数

分类专栏： JQuery JAVA

本文链接：https://blog.csdn.net/kuaileren003/article/details/8525020

版权

JAVA 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

JQuery

7 篇文章 0 订阅

订阅专栏

For the most basic implementation, follow the steps below:

1. Download the Uploadify Zip Package. It’s FREE!

2. Unzip the package and upload the following files into a folder on your website:

jquery.uploadify-3.1.min.js
uploadify.php
uploadify.swf
uploadify.css
uploadify-cancel.png
check-exists.php (to check for existing files in your destination folder)

3.submit.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
 <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/sas/uploadify/uploadify.css">

    <script type="text/javascript" src="<%=request.getContextPath() %>/sas/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
    $(function() {
    	 
       $('#file_upload').uploadify({
            'swf'      : '<%=request.getContextPath() %>/sas/uploadify/uploadify.swf',
            'uploader' : '<%=request.getContextPath() %>/admin2Login.do?method=OOKK',
             auto : true,
             'fileSizeLimit' : '700KB',
             'fileTypeDesc' : 'Image Files',
             'fileTypeExts' : '*.gif; *.jpg; *.png',
             buttonText:'请选择文件(一个或多个)',
             'onUploadSuccess' : function(file, data, response) {
            	 //每个文件上传成功后会调用，可能会两次
            	 //alert('文件[' + file.name + ']上传成功了,' + response + '返回值:' + data);
            	 $("#shownode").append("<p>已成功上传"+file.name+"文件</p>");
            	 
            	 var obj = jQuery.parseJSON(data);                 
                 var dataObj=eval("("+obj.message+")");//截取message部分转换为json对象 
                 // alert("firstParam = "+dataObj.firstParam);
                 // alert("secondParam = "+dataObj.secondParam);
                 // alert("totalProperty = "+dataObj.totalProperty);
                 // alert("root = "+dataObj.root);
                 
                 //解析list对象
             	 var arr = eval(dataObj.root);
                 var ret ="";
				  for (var i=0, arrLength=arr.length; i < arrLength;i++){
					  	var arrobj = arr[i];
					  	//alert(arrobj.id+arrobj.value);
					  	var node = "<p><a href='#' >解析返回值->编号"+arrobj.id+",值为:"+arrobj.value+"</a></p>";
					  	ret = ret+ node;
					  	//$("#shownode").append(node);
				  }
				  $("#shownode").append(ret);
                  
              },
		       'onQueueComplete' : function(queueData) {
		           //alert(queueData.uploadsSuccessful + ' 个文件上传成功！');
		    	   $("#shownode").append("<p>已成功上传"+queueData.uploadsSuccessful+"个文件</p>");
		       }

        });
    });
    </script>

</head>

<body>

<br>测试多文件上传<br><br><br><br>
<input type="file" name="file_upload" id="file_upload" />
<br><br><br><br>
<div id="shownode" ></div>
</body>
</html>

4.\web\control\Admin2LoginController.java

	@RequestMapping(params = "method=OOKK", method = RequestMethod.POST)
	public String OOKK(HttpServletRequest request) throws Exception {
		String navTabid = request.getParameter("navTabid");
		String opeatorId = request.getParameter("opeatorId");

                 //注意这里上传2个文件，这里会被调用两次；

                  //这里应该是真正上传文件保存到数据库的过程

		String firstParam="返回参数1";
		String secondParam="返回参数2";
		
		List list = new ArrayList();
		list.add("郭小心");
		list.add("王晓霞");
		request.setAttribute("mylist", list);
		
		request.setAttribute("statusCode", "200");
		request.setAttribute("message", getJason(firstParam,secondParam,list));
		request.setAttribute("callbackType", "");
		request.setAttribute("navTabId", "");

        
		System.out.println("哥真上传了！哥还返给你个串："+getJason(firstParam,secondParam,list));
		return "admin2/security/ajaxDone";
	}
	
	private String getJason(String fParam,String sParam,List list) {
		int sum = list.size();
		String jason1 = "{firstParam:'"+fParam+"',secondParam:'"+sParam+"',totalProperty:" + sum + ",root:[";
		String jason2 = "";
		String jason3 = "]}";
		StringBuffer jason = new StringBuffer(200);

		Iterator iterator = list.iterator();
		int i = 0;
		while (iterator.hasNext()) {
			String u = (String) iterator.next();
			jason.append("{id:'" + i++
					+ "',value:'"+u+"'},");
		}
		jason2 = jason.toString();
		if (jason2.equals("")) {
			return jason1 + jason2 + jason3;
		}
		return jason1 + jason2.substring(0, jason2.length() - 1) + jason3;
	}

哥真上传了！哥还返给你个串：{firstParam:'返回参数1',secondParam:'返回参数2',totalProperty:2,root:[{id:'0',value:'郭小心'},{id:'1',value:'王晓霞'}]}

系统返回JSON 的串是这样的：

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

参考文档：

uploaderOption: http://www.uploadify.com/documentation/
auto            : true,               // Automatically upload files when added to the queue
buttonClass     : '',                 // A class name to add to the browse button DOM object
buttonCursor    : 'hand',             // The cursor to use with the browse button
buttonImage     : null,               // (String or null) The path to an image to use for the Flash browse button if not using CSS to style the button
buttonText      : 'SELECT FILES',     // The text to use for the browse button
checkExisting   : false,              // The path to a server-side script that checks for existing files on the server
debug           : false,              // Turn on swfUpload debugging mode
fileObjName     : 'Filedata',         // The name of the file object to use in your server-side script
fileSizeLimit   : 0,                  // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit)
fileTypeDesc    : 'All Files',        // The description for file types in the browse dialog
fileTypeExts    : '*.*',              // Allowed extensions in the browse dialog (server-side validation should also be used)
height          : 30,                 // The height of the browse button
itemTemplate    : false,              // The template for the file item in the queue
method          : 'post',             // The method to use when sending files to the server-side upload script
multi           : true,               // Allow multiple file selection in the browse dialog
formData        : {},                 // An object with additional data to send to the server-side upload script with every file upload
preventCaching : true,               // Adds a random value to the Flash URL to prevent caching of it (conflicts with existing parameters)
progressData    : 'percentage',       // ('percentage' or 'speed') Data to show in the queue item during a file upload
queueID         : false,              // The ID of the DOM object to use as a file queue (without the #)
queueSizeLimit : 999,                // The maximum number of files that can be in the queue at one time
removeCompleted : true,               // Remove queue items from the queue when they are done uploading
removeTimeout   : 3,                  // The delay in seconds before removing a queue item if removeCompleted is set to true
requeueErrors   : false,              // Keep errored files in the queue and keep trying to upload them
successTimeout : 30,                 // The number of seconds to wait for Flash to detect the server's response after the file has finished uploading
uploadLimit     : 0,                  // The maximum number of files you can upload
width           : 120,                // The width of the browse button