jquery upload 插件开发说明

时间 2019-11-18

原文原文链接

前言

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

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

页面调用说明

 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)格式为:html5

　　name:js生成的guidjquery

　　file:文件流file对象css3

返回数据(Json)格式:跨域

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

支持跨域

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

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

receive文件为消息接收与文件上传地址.采用h5的postMessage做为跨域的消息通讯(注意即使postMessage能够进行各种甚至大量数据的传输。可是不支持文件流的传输)。学习

因此针对此类限制，将上传插件修改成server版。将server版与client端配合进行文件上传操做。

以下图子域配置:

全文结束

1. JQuery插件开发 + 插件
2. jquery-tips悬浮提示插件说明
3. JQuery DataTables插件使用说明（最新）
4. JQuery-Cookie 插件使用说明
5. jQuery插件开发
6. jquery插件开发
7. jquery开发插件
8. Jquery插件开发
9. jQuery-File-Upload 使用，jQuery-File-Upload上传插件
10. jquery file upload插件的运用
更多相关文章...
• Eclipse 窗口说明 - Eclipse 教程
• PHP EOF(heredoc) 使用说明 - PHP教程
• PHP开发工具
• IntelliJ IDEA安装代码格式化插件

jquery upload 插件开发说明

前言

项目文件目录说明

页面调用说明

组件容器参数说明

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

支持跨域