Uploadify跨域上传

最新推荐文章于 2017-09-18 11:26:14 发布

xuke6677

最新推荐文章于 2017-09-18 11:26:14 发布

阅读量2.9k

点赞数

分类专栏：插件文章标签： Uploadify跨域

插件专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Uploadify本质上是一个基于Flash的jQuery上传插件.

Uploadify跨域上传原理可以看看 http://www.cnblogs.com/me-sa/archive/2010/05/21/How-Uploadify-Cross-Domain.html

怕忘记了，所有转过来了

转：mfc2003 的 http://blog.csdn.net/mfc2003/article/details/17787085

注：HTML5 写好了，通过phonegap打包成APK后发现文件上传无法使用 HTML5是相对路径， apk里必须是绝对路径访问外网服务器的。

1、JQUERY+uploadify 实现跨域上传

第一步写JS

 $(document).ready(function () {
            var historyStr = "";
            var completStr = "";
            var errorStr = "";
            $("#file_upload").uploadify({

                'swf': 'commond-plug/uploadify/uploadify.swf',
              /*  'uploader': '../servlet/Upload', */
                'uploader': 'http://10.81.66.176:8080/NongGu/servlet/Upload',
              　
                'buttonText': '选择图片...',
                'fileSizeLimit': '4000KB',//文件最大容量
                'fileTypeDesc': '图片文件', //文件类型说明
                'fileTypeExts': '*.gif; *.jpg; *.png',//限定可以上传的文件类型
                /*       'fileTypeDesc' : '所有文件', //文件类型说明
                 'fileTypeExts' : '*.*',//限定可以上传的文件类型*/
                'formData': {'someKey': 'someValue', 'someOtherKey': 1}, //好像是可以带参数
                'height': 30,   //按钮 高度 默认30
                'width': 90,     //按钮宽度
                'method': 'post', //默认post
                'multi': true, //支持多文件，默认为true
                'progressData': 'speed', //进度条类型，默认 percentage
                'queueID': 'file_queue', //进度条 在哪里显示,可以不设置
                'queueSizeLimit': 2,  //每次提交的数量（multi =true才有意义)，默认999
                'removeCompleted': true,//是否在任务列表 删除 历史记录 默认 true
                // 'removeTimeout' : 10,  //不知道什么意思
                'successTimeout': 5, //默认30
                'uploadLimit': 3, //一次会话中运行的上传数量 默认999 ，
                'auto': false,
                'onUploadStart': function (file) {

                    $("#file_upload").uploadify("settings", "formData", {'someKey': 'zms', someOtherKey: 22});

                    //  console.log('Attempting to upload: ' + file.name);
                    historyStr = historyStr + "\n" + file.name;
                    $("#history").text("历史" + historyStr);
                },

                'onUploadSuccess': function (file, data, response) {
                    $("#complet").text('文件file.name: ' + file.name + '已经上传成功 ,返回的数据response:  ' + response + 'data:' + data);

                   //把取回来的URI 转码，因为url可能包含中文，会变成乱码。
                    location.href=encodeURI(encodeURI(data));
                },
                /* onComplete : function (event, queueID, fileObj, response, data)
                 {
                 alert("beyond");
                 completStr=completStr+"\n"+response;
                 $("#complet").text("这里是返回的"+completStr);
                 },*/
                onError: function (event, queueID, fileObj) {
                    alert("文件:" + fileObj.name + " 上传失败");
                }
});

2、 HTML 代码

<body>
图片上传2：
<div id="file_queue">
    <p><a href="javascript:$('#file_upload').uploadify('upload')">上传文件</a></p>
</div>
<div id="history"></div>
<br>

<div id="complet"></div>
<br>

<div id="error"></div>

<input type="file" name="file_upload" id="file_upload"/>

</body>

3、第二步：修改tomcat的配置，在weapps/Root 里增加跨域策略文件文件 crossdomain.xml

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>

4、java服务端的代码servlet

package zms.zte.servlet;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.servlet.ServletRequestContext;

//需要 commons-fileupload-1.2.2 commons-io-1.3.2
@SuppressWarnings("serial")
public class Upload extends HttpServlet {

	private String uploadPath = " "; // 上传文件的目录
	private String tempPath = " ";// 临时文件目录
	File tempPathFile;

	private String time = "";
	private String type = "";
	private String xingtai = "";
	private String num = "";
	private String imageurl = "";

	@SuppressWarnings("unchecked")
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		try {
			request.setCharacterEncoding("UTF-8");
			response.setContentType("text/html;charset=UTF-8");
			response.setHeader("Cache-Control", "no-cache");
			PrintWriter out = response.getWriter();

			ServletContext s1 = this.getServletContext();
			String temp = s1.getRealPath("/");

			// uploadPath= request.getContextPath()+"\\files";
			uploadPath = temp + "files";
			System.out.println("路径:" + uploadPath);
			tempPath = uploadPath;

			DiskFileItemFactory factory = new DiskFileItemFactory();
			// Set factory constraints
			factory.setSizeThreshold(4096); // 设置缓冲区大小，这里是4k
			factory.setRepository(tempPathFile);// 设置缓冲区目录
			// Create a new file upload handler
			ServletFileUpload upload = new ServletFileUpload(factory);
			// 解决中文乱码问题
			upload.setHeaderEncoding("utf-8");
			// Set overall request size constraint
			upload.setSizeMax(41943044); // 设置最大文件尺寸，这里是4MB

			List<FileItem> items = null;
			try {
				items = upload.parseRequest(request);// 得到所有的文件

			} catch (Exception ex) {
				System.out.println("没有传文件过来");
				ex.printStackTrace();
				return;
			}
			Iterator<FileItem> i = items.iterator();
			while (i.hasNext()) {

				FileItem fi = (FileItem) i.next();

				String fileName = fi.getName();

				if (fileName != null) {

					File fullFile = new File(fi.getName());

					File savedFile = new File(uploadPath, fullFile.getName());

					fi.write(savedFile);
					imageurl = fullFile.getName();
					System.out.println("存储文件:" + imageurl);
					// response.setContentType("text/html;charset=UTF-8");
					// response.setHeader("Cache-Control", "no-cache");
					// PrintWriter out = response.getWriter();

					// out.write("返回内容"+fullFile.getName());
					// out.flush();
					// out.close();
				}

				else {
					// 获取参数
					String fieldName = fi.getFieldName();

					if (fieldName.equalsIgnoreCase("role1")) {

						type = fi.getString("UTF-8");
						System.out.println("类型:" + type);

					}
					if (fieldName.equalsIgnoreCase("mydate1")) {

						time = fi.getString("UTF-8");
						System.out.println("时间:" + time);

					}
					if (fieldName.equalsIgnoreCase("c")) {

						xingtai = fi.getString("UTF-8");
						System.out.println("形态:" + xingtai);

					}
					if (fieldName.equalsIgnoreCase("num")) {

						num = fi.getString("UTF-8");

						System.out.println("数量:" + num);
					}
				}

			}
			System.out.print("上传成功");
			String url = "infocz.html?time=" + time + "&type=" + type
					+ "&xingtai=" + xingtai + "&imagename=" + imageurl
					+ "&num=" + num;
			System.out.println(url);
			out.write(url);
			out.flush();
			out.close();
			// response.sendRedirect(url);
		} catch (Exception e) {
			// 可以跳转出错页面
			System.out.println("大try出错");
			e.printStackTrace();
		}

	}

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}

	public void init() throws ServletException {
		File uploadFile = new File(uploadPath);
		if (!uploadFile.exists()) {
			uploadFile.mkdirs();
		}
		File tempPathFile = new File(tempPath);
		if (!tempPathFile.exists()) {
			tempPathFile.mkdirs();
		}

	}

}

5、html代码打包apk

运行的时候，后台报错说，我在安卓里增加了 interact-across 权限也没有用，看来安卓版的只能使用 phonegap 改造HTML5，这样 htmL5代码就和安卓的代码不一致了

xuke6677

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Uploadify跨域上传

Uploadify本质上是一个基于Flash的jQuery上传插件. Uploadify跨域上传原理可以看看 http://www.cnblogs.com/me-sa/archive/2010/05/21/How-Uploadify-Cross-Domain.html怕忘记了，所有转过来了转：mfc2003http://blog.csdn.net/mfc2003/artic
复制链接

扫一扫