jquery upload 插件开发说明

  前言

　　　　本实例为初步版本的文档说明，供学习与下载。请多多提出指导意见。

　　　　项目目前仅支持html5/css3，暂时只处理了上传图片、音频类文件、其他文件等。项目同时支持跨域上传。

  • 项目文件目录说明

　　

  • 页面调用说明

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title>这是一个简单的上传</title>
 5     <!-- 必须引入的js、css文件 -->
 6     <link href="../css/upload.css" rel="stylesheet" />
 7     <script src="../script/jquery-1.10.2.js"></script>
 8     <script src="../script/util.js"></script>
 9     <script src="../jquery-upload.js"></script>
10 </head>
11 <body>
12     <p style="clear: both; color: rgb(194, 61, 55); font-size: 16px">多文件,上传图片类文件</p>
13     <!-- 上传组件容器 -->
14     <div id="uploadContainer" 
15          data-url="../handle/UploadHandler.ashx" 
16          data-accept="image/jpeg,image/png" 
17          data-size="2048" 
18          data-multiple="multiple" 
19          data-callback-func="testCallbackFunc" 
20          data-callback-element="testCallback" 
21          data-path="../../files/{0}">
22     </div>
23 
24     <div style="clear: both;padding-top:  20px">
25         <!-- 回写的input元素 -->
26         <input style="width: 250px" type="text" value="" name="testCallback" />
27     </div>
28     <script>
29         //上传成功后回调方法
30         window.testCallbackFunc = function (status) {
31             alert("回调状态:" + status);
32         }
33     </script>
34 </body>
35 </html>

  • 组件容器参数说明

<div id="uploadContainer" ------------------------------容器id,一个页面多个组件时id应当唯一
         data-url="../handle/UploadHandler.ashx" -------上传处理程序
         data-accept="image/jpeg,image/png" ------------文件格式限定，注意用逗号隔开，如果为notlimit则可以上传任意类型文件
         data-size="2048" ------------------------------文件最大尺寸
         data-multiple="multiple" ----------------------是否允许多选文件
         data-callback-func="testCallbackFunc" ---------上传完成回调函数
         data-callback-element="testCallback" ----------上传完成回写元素
         data-path="../../files/{0}">-------------------图片显示路径
</div>

  • 发送/接收文件处理程序返回数据格式

发送数据(FormData)格式为:

　　name:js生成的guid

　　file:文件流file对象

返回数据(Json)格式:

　　

其中FormKey为发送数据的表单name，处理完成后必须回传给js

  • 支持跨域

div中加入标签: data-cross-domain="true"即可实现跨域上传，但需在

jquery-upload.js中配置跨域的子域名，如下图:

receive文件为消息接收与文件上传地址.采用h5的postMessage作为跨域的消息通信(注意即便postMessage可以进行各类甚至大量数据的传输。但是不支持文件流的传输)。

所以针对此类限制，将上传插件修改为server版。将server版与client端配合进行文件上传操作。

如下图子域配置:

全文结束

 

posted @ 2015-03-24 23:27  SpringRen  阅读(258)  评论(0)    收藏  举报