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入门教程(7) History历史对象
Jan 31 Javascript
javascript 对象定义方法 简单易学
Mar 22 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
javascript中的this作用域详解
Jul 15 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 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自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
jQuery 动画基础教程
2008/12/25 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
巧用canvas
2017/01/21 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python获取栅格点和面值的实现
2020/03/10 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
python 常见的反爬虫策略
2020/09/27 Python
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
商场促销活动方案
2014/02/08 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
比赛口号大全
2014/06/10 职场文书