jQuery AJAX 网页无刷新上传示例

时间：2022-09-01 10:31:22

新年礼，提供简单、易套用的 jQuery AJAX 上传示例及代码下载。后台对文件的上传及检查，以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP)。

有时做一个网站项目 (不论是否 ASP.NET)，内附的 FileUpload 控件，功能不足 (页面必须刷新、不支援 AJAX)，或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观)。网路上虽已有许多可用的示例，如： jQuery File Upload，但功能太强大、外观复杂，欲仅取出部分功能来引用，反而不易。因此我参考了两本书上、多个网路上的示例，整合、改写成此一示例，标榜：功能简单 (够用就好)、外观可自定义 (只用 HTML 的 div、span、input，不被特定厂商的控件绑死)、日后做其他网站项目都易于使用 (公司其他程序员，不必再改写一堆 jQuery、JavaScript、CSS)。
---------------------------------------------------------------
WizardWuUpload 上传文件(图片)
日期: 2015/02/19
版本: v1.1
---------------------------------------------------------------
示例代码下载点:

http://files.cnblogs.com/files/WizardWu/150219.zip
(执行本示例，不用数据库，但需要 IIS 或 Visual Studio)
---------------------------------------------------------------
执行方式:

用 Visual Studio 或 IIS 开启网站，以任一种浏览器，执行 SingleUpload.html 或 MultiUpload.html。上传后的文件(图片)，存放在 /uploadFiles 文件夹底下。
---------------------------------------------------------------

jQuery AJAX 网页无刷新上传示例
图 1　示例架构

---------------------------------------------------------------

jQuery AJAX 网页无刷新上传示例
图 2　执行画面 - 单一上传 & 引用蓝色CSS文件

jQuery AJAX 网页无刷新上传示例
图 3　执行画面 - 单一上传 & 引用绿色CSS文件

jQuery AJAX 网页无刷新上传示例
图 4　执行画面 - 复数上传 & 引用银色CSS文件

---------------------------------------------------------------
本示例的功能:

* 上传时用 jQuery 的 AJAX 处理，画面不会 refresh 刷新 (调用 jQuery Form 的 ajaxSubmit [5]，异步地提交表单)。
* 可自订「上传按钮、进度条」的外观、引用您想要的 CSS (本示例提供：绿色、蓝色、银色，三种 CSS 文件可引用)。
* 上传期间，会显示进度条。
* 上传完后，会出现预览图。
* 上传完后，会出现「删除图片」超连接，可让用户删除刚上传的图片。
* 可限制上传图片的扩展名、文件大小的上限 (由 C# / WizardWuUpload.ashx 控制)，并会给用户相关警示信息。
* 外观上 IE、FireFox、Chrome 都一致 (此点亦为 jQuery 的特性)。
* .html、.aspx 都可套用此示例。若为 PHP 或 JSP，需自行改写 WizardWuUpload.ashx，但不必改写 jQuery。

本示例的特性:

* 讲求实用、网站项目中易于套用，而非功能强大、外观华丽。
* 将 css、jQuery 抽出来成为独立的共用文件，方便项目中套用此示例，不必每一页重复撰写。
* 将页面上的 DOM 对象(控件) 的 id 特别命名过，方便项目中套用此示例。
---------------------------------------------------------------

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>无刷新上传文件 - 页面只有一个上传</title>

         <!--<link rel="stylesheet" href="css/WizardWuUpload_Blue.css" />-->

         <link rel="stylesheet" href="css/WizardWuUpload_Green.css" />

         <!--<link rel="stylesheet" href="css/WizardWuUpload_Silver.css" />-->

         <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

         <script type="text/javascript" src="js/jquery.form.js"></script>

         <script type="text/javascript" src="js/WizardWuUpload.js"></script>

         <script type="text/javascript">

             $(function () {

                 //傳入的參數，為該 divUploadArea 區塊中，所有 DOM 对象(控件) 的 id 編號，如: divUploadArea1、spanUploadSelect1、WizardWuFileUpload1、...

                 $(this).loadUploadContent('1'); //載入第一個上傳區塊 divUploadArea1 所需要的 form 及 jQuery 內容

             });

         </script>

 </head>

 <body>

     <h2>WizardWu 无刷新上传文件 - 页面只有一个上传</h2>

     <table>

         <tr>

             <td>

                 <p>只允许上传 jpg/jpeg/gif/png/bmp 格式的图片，图片大小不能超过 1 MB</p>

                 <div class="UploadArea" id="divUploadArea1">

                     <div class="UploadButton">

                         <span id="spanUploadSelect1">选择文件</span>

                         <!--上传用的file控件-->

                         <input id="WizardWuFileUpload1" type="file" name="此处name可随便命名，name名称可重复" />

                     </div>

                     <!--显示加载进度-->

                     <div class="UploadProgress" id="divUploadProgress1">

                         <span class="UploadBar" id="spanUploadBar1"></span><span class="UploadPercent" id="spanUploadPercent1">0%</span>

                     </div>

                     <!--显示已经上传的文件名、上传成功才会出现的「删除图片」字样超连接、删除成功才会出现的「删除成功」字样-->

                     <div class="ShowContentAfterUploadSuccess" id="divShowContentAfterUploadSuccess1"></div>

                     <!--显示已经上传的图片-->

                     <div id="divShowImageAfterUploadSuccess1"></div>

                 </div>

             </td>

         </tr>

     </table>

 </body>

 </html>

引用此示例的 html

---------------------------------------------------------------
ASP.NET 内附 FileUpload 控件的问题:

* 上传时画面会 refresh 刷新，无法套用 AJAX / UpdatePanel 相关功能。
* 控件的外观，被微软写死，无法透过引用 CSS 改变外观。
* Google Chrome 与 IE、FireFox，不同的浏览器，外观上呈现会不一致。
---------------------------------------------------------------
网路上 jQuery File Upload 的问题:

http://blueimp.github.io/jQuery-File-Upload/
* 功能强大、外观太复杂，想仅取出部分功能，来套用或改写有难度。
---------------------------------------------------------------
---------------------------------------------------------------
参考资料:

[1] 超实用的jQuery代码段 (此书第 8-11 节，部分代码取自 8-12)
http://www.broadview.com.cn/23949

[2] Asp.Net 用 Jquery 和一般处理程序实现无刷新上传大文件
http://www.cnblogs.com/zhongweiv/archive/2013/04/16/upload_without_refresh.html

[3] HttpPostedFile 类
https://msdn.microsoft.com/zh-cn/library/system.web.httppostedfile%28v=vs.110%29.aspx

[4] HttpFileCollection 类
https://msdn.microsoft.com/zh-cn/library/system.web.httpfilecollection(v=vs.110).aspx

[5] Form Plugin API
http://malsup.com/jquery/form/#api

[6] jQuery 表单插件 ajaxForm, ajaxSubmit 使用详解
http://blog.snsgou.com/post-146.html

[7] 其他 jQuery 书籍、其他网路上的文章
---------------------------------------------------------------

jQuery AJAX 网页无刷新上传示例的更多相关文章

  1. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  2. jQuery&plus;php&plus;ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  3. PHP&plus;Ajax&plus;plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png&quot ...

  4. jQuery&plus;AJAX实现网页无刷新上传

    新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  5. 文件上传---form表单，ajax&comma;jquery&comma;以及iframe无刷新上传 （processData，contentType讲解）

    服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...

  6. &lbrack;Asp&period;net mvc&rsqb;jquery&period;form&period;js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  7. ajax实现无刷新上传附件并且显示进度条的实例

    首先:得把php.ini中的post_max_size和upload_max_filesize改成200M或更大(进度条好看效果,默认是2M) html和js代码: <!DOCTYPE html ...

  8. ajax ＋jsp＋iframe无刷新上传文件&lbrack;转&rsqb;

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

  9. 理清fineuploader无刷新上传的一些事

    1.fineuploader是一款不依赖与jquery的异步无刷新上传组件,fineuploader采用ajax方式实现对文件上传,返回值都是以json的格式,对后台服务器操作和前端dom对象一些操作 ...

随机推荐

  1. 在PHP中如何使用消息列队

    /** * 消息列队服务 * @author zhou.tingze * @example * -----------------------------------Create----------- ...

  2. Linux kernel AACRAID Driver Compat IOCTL 本地安全绕过漏洞

    漏洞名称: Linux kernel AACRAID Driver Compat IOCTL 本地安全绕过漏洞 CNNVD编号: CNNVD-201311-390 发布时间: 2013-11-29 更 ...

  3. &period;where&lpar;provider&rpar;&period;FirstOrDefault&lpar;&rpar;和&period;FirstOrDefault&lpar;provider&rpar;的性能比较

    最近遇到一个关于Linq的问题,.where(provider).FirstOrDefault();和.FirstOrDefault(provider);的性能比较 关于这个主要有以下三种说法,但这方 ...

  4. XMLHelper 类

     这个XMLHelper类中包括了XML文档的创建,文档节点和属性的读取,添加,修改,删除的方法功能的实现,有兴趣的朋友,可以进来看看,所有代码都在WebForm和WinForm中调试通过. 这是下面 ...

  5. CentOS 6&period;7 下 MYSQL 5&period;7 的安装与配置

    安装 #yum源 http://dev.mysql.com/downloads/repo/yum/ #安装 rpm -Uvh http://dev.mysql.com/get/mysql57-comm ...

  6. Linux通过ssh登录其他服务器，不用输入密码

    有A(192.168.10.163)和B(192.168.10.164)两台服务器,为了使A服务器通过SSH连接B服务器时,免密登录,做以下操作. 1. 登录A(192.168.10.163)服务器( ...

  7. 如果你的shiro没学明白，那么应该看看这篇文章，将shiro整合进springboot

    最近在做项目的时候需要用到shiro做认证和授权来管理资源 在网上看了很多文章,发现大多数都是把官方文档的简介摘抄一段,然后就开始贴代码,告诉你怎么怎么做,怎么怎么做 相信很多小伙伴即使是跟着那些示例 ...

  8. 常见web漏洞

    常见的web漏洞——文件上传漏洞 一.文件上传漏洞概述    文件上传漏洞是指用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力.这种攻击方式是最为直接和有效的,有时候几乎没 ...

  9. Android java获取凌晨的时间戳

    这两天有一个需求是查询用户匹配的推荐信息,包含一个有效时间段,以天为单位,0时0分0秒这种. 通常java中有两种方案: 第一种:Calendar.这种比较简单,也最常见.代码如下: Calendar ...

  10. C&num;类的成员（字段、属性、方法）

    前面定义的Person的类,里面的成员包括:字段.属性.方法.事件等,此外,前面说的嵌套类也是类的成员. a.类的成员为分:静态成员(static)和非静态成员 b.静态成员用static标识,不标识 ...

相关文章