jQuery+AJAX实现网页无刷新上传

更新时间：2015年02月22日 17:15:05 投稿：hebedich

这篇文章主要介绍了jQuery+AJAX实现网页无刷新上传的相关资料，十分详细,需要的朋友可以参考下

新年礼，提供简单、易套用的 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
---------------------------------------------------------------
示例代码下载点:

（稍后奉上）
(执行本示例，不用数据库，但需要 IIS 或 Visual Studio)
---------------------------------------------------------------
执行方式:

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

图 1　示例架构

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

图 2　执行画面 - 单一上传 & 引用蓝色CSS文件

图 3　执行画面 - 单一上传 & 引用绿色CSS文件

图 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/
* 功能强大、外观太复杂，想仅取出部分功能，来套用或改写有难度。
---------------------------------------------------------------

小伙伴们仔细研究下吧，希望大家能够喜欢本文。

您可能感兴趣的文章:

jquery 实现表单验证功能代码(简洁)
jquery 实现表单验证功能代码,代码比较简洁，需要的朋友可以参考下
2012-07-07
jquery中用函数来设置css样式
本文主要对jquery中用函数来设置css样式的方法进行详细介绍，具有很好的参考价值，下面就跟小编一起来看下吧
2016-12-12
jquery isType() 类型判断代码
jquery isType() 类型判断代码，需要的朋友可以参考下。
2011-02-02
$几种二级联动案例（jQuery\Array\Ajax php）$
几种二级联动案例（jQuery\Array\Ajax php）
这篇文章主要为大家详细介绍了几种二级联动案例（jQuery\Array\Ajax php），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
jQuery实现图片切换效果
这篇文章主要为大家详细介绍了jQuery实现图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
jQuery实现产品对比功能附源码下载
一些电商网站产品或评测网站会为用户提供产品对比的功能，用户只需勾选多个需要对比的产品，就可以进行比对,下文给大家带来了jQuery实现产品对比功能，一起看下吧
2016-08-08
jQuery 选择同时包含两个class的元素的实现方法
下面小编就为大家带来一篇jQuery 选择同时包含两个class的元素的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
jquery中ajax使用error调试错误的方法
这篇文章主要介绍了jquery中ajax使用error调试错误的方法,实例分析了Ajax的使用方法与error函数调试错误的技巧,需要的朋友可以参考下
2015-02-02
jquery点击页面任何区域实现鼠标焦点十字效果
鼠标点击聚焦，地图定位，在图片上突出显示，焦点定位页面元素，这些都是在系统开发是经常需要用到的，下面为大家介绍下具体的实现，感兴趣的朋友可以参考下哈
2013-06-06
Jquery表单验证失败后不提交的解决方法
很多人可能都会遇到在调试的时候用了return了false，可为什么还会提交呢？这个问题我最近也碰到了，尝试了多次也没有用，后来终于发现了其中的问题，下面分享处理给大家，让同样遇到这个问题的朋友们能够看看，有需要的朋友们下面来一起看看吧。
2016-10-10