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


Posted in Javascript onFebruary 22, 2015

新年礼,提供简单、易套用的 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 文件夹底下。
---------------------------------------------------------------

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 ?^?K中,所有 DOM 对象(控件) 的 id ??,如: divUploadArea1、spanUploadSelect1、WizardWuFileUpload1、...
        $(this).loadUploadContent('1'); //?入第一??上??^?K 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/
* 功能强大、外观太复杂,想仅取出部分功能,来套用或改写有难度。
---------------------------------------------------------------

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

Javascript 相关文章推荐
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
js图片处理示例代码
May 12 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 #Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 #Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 #Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 #Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 #Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 #Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 #Javascript
You might like
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
openPNE常用方法分享
2011/11/29 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
js 蒙版进度条(结合图片)
2010/03/10 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
React如何避免重渲染
2018/04/10 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
企业诚信承诺书
2014/05/23 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
python开发飞机大战游戏
2021/07/15 Python
在项目中使用redis做缓存的一些思路
2021/09/14 Redis