新年礼，提供简单、易套用的 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+AJAX实现网页无刷新上传的更多相关文章

  1. jQuery AJAX 网页无刷新上传示例

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

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

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

  3. jQuery+php+ajax实现无刷新上传文件功能

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

  4. [Asp.net mvc]jquery.form.js无刷新上传

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

  5. jQuery无刷新上传之uploadify简单试用

    先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...

  6. ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

    先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  7. Jquery ajaxfileupload.js结合.ashx文件实现无刷新上传

    先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  8. PHP+Ajax+plupload无刷新上传头像代码

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

  9. ajax无刷新上传和下载

    关于ajax无刷新上传和下载 这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的. 关于上传 1.使用Flash,ActiveX 上传 ,略... 2.自己写XMLH ...

随机推荐

  1. DOS批处理命令-for语句

    for是为了循环执行一系列命令而执行的命令语句. for要处理的内容不同,语法结构稍有不同.下面就各种情形来分别 1.基本的语法:FOR %変数 IN (set) DO 命令 [参数] 语法内容解析: ...

  2. public animal this[int index]|索引器的使用

    学习如何使用索引器,索引器的使用是public 类型 this[int index]{get{};set{}} ,访问通过类的实例(对象)加[i], 例如animal[i],就像访问数组一样,其实就是 ...

  3. 【SNMP】SNMP概述

    SNMP概述 SNMP(Simple Network Management Protocol,简单网络管理协议)是目前UDP/IP网络中应用最为广泛的网络管理协议,它提供了一个管理框架来监控和维护互联 ...

  4. 集合框架学习之Guava Collection

    开源工具包: Guava : Google Collection Apache:Commons Collecton 1.1 Google Collections Guava:google的工程师利用传 ...

  5. 集合类学习之HashMap经典储存 分拣存储与面向对象组合

    HashMap:键值对(key-value) 通过对象来对对象进行索引,用来索引的对象叫做key,其对应的对象叫做value. 默认是1:1关系(一对一) 存在则覆盖,当key已经存在,则利用新的va ...

  6. 使用jQuery POST提交数据返回的JSON是字符串不能解析为JSON对象

    post请求原代码: $.post( "/User/Home/Code", { Phone: $( "#phone").val() }, function (d ...

  7. (转)国内外三个不同领域巨头分享的Redis实战经验及使用场景

    随着应用对高性能需求的增加,NoSQL逐渐在各大名企的系统架构中生根发芽.这里我们将为大家分享社交巨头新浪微博.传媒巨头Viacom及图片分享领域佼佼者Pinterest带来的Redis实践,首先我们 ...

  8. Boost库实现线程池学习及线程实现的异步调用

    A.Boost线程池实现 参考自: Boost库实现线程池实例 原理:使用boost的thread_group存储多个线程,使用bind方法将要处理的函数转换成线程可调用的函数进行执行:使用队列存储待 ...

  9. c# WinForm 编程总结

    1.清空DataGridView /// <summary> /// 清空DataGridView /// </summary> /// <param name=&quo ...

  10. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...