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 相关文章推荐
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 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的autoLoad自动加载机制
2012/09/27 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
php-fpm中max_children的配置
2019/03/15 PHP
Javascript实现的分页函数
2006/12/22 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python实现的桶排序算法示例
2017/11/29 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
Django stark组件使用及原理详解
2019/08/22 Python
Python for i in range ()用法详解
2020/09/18 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python实现验证码识别
2020/06/15 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
《狼》教学反思
2014/03/02 职场文书
自动一体化专业求职信
2014/03/15 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python