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之水平横向滚动歌词同步的应用
May 07 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
vue文件运行的方法教学
Feb 12 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
处理canvas绘制图片模糊问题
May 11 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
实现树状结构的两种方法
2006/10/09 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
python基础知识小结之集合
2015/11/25 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python 读取修改pcap包的例子
2019/07/23 Python
python分布式计算dispy的使用详解
2019/12/22 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
区域销售经理职责
2013/12/22 职场文书
优秀交警事迹材料
2014/01/26 职场文书
普通话宣传标语
2014/06/26 职场文书
学校端午节活动方案
2014/08/23 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
论语读书笔记
2015/06/26 职场文书
运动会加油稿
2015/07/22 职场文书
七年级作文之冬景
2019/11/07 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书