JQuery插件ajaxfileupload.js异步上传文件实例


Posted in Javascript onMay 19, 2015

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了。ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手。

前置条件:ajaxfileupload.js文件,百度下载一个就行。

JS引用:

<script src="/Content/JQueryJS/jquery-2.1.1.js"></script>

<script src="/Content/Js/ajaxfileupload.js"></script>

html代码:

 <input id="fileToUpload" type="file" name="fileToUpload">

JS代码:
function saveCInfo() {

            var filename = document.getElementById("fileToUpload").value;

            if (filename != "") {

                $.ajaxFileUpload({

                    url: '../Order/OrderExec.ashx?oprMode=fileUpload' + "&filename=" + filename + "&billno=" + billno + "&companyname=" + companyname,

                    secureuri: false,

                    fileElementId: 'fileToUpload',//上传控件ID

                    //dataType: 'json',

                    error: function () { alert('error'); },

                    success: function (datax) {

                        if (datax != "") {

                            msgShow('系统提示', '上传成功!', 'info');

                        } else {

                            msgShow('系统提示', '上传失败!', 'info');

                        }

                    }

                });

            } else {

                $.messager.alert('提示', '请选择上传文件', 'info');

            }

        }

后台代码:
public void FileUpload(HttpContext context)

        {

            try

            {

                context.Response.ContentType = "text/html";

                string companyname = context.Request.Params["companyname"];

                string billno = context.Request.Params["billno"];

                string filename = context.Request.Params["filename"];

                string name = companyname + "_" + billno + "_" + filename;

                HttpFileCollection files = HttpContext.Current.Request.Files;

                //指定上传文件在服务器上的保存路径 

                string savePath = context.Server.MapPath("~/upload/");

                //检查服务器上是否存在这个物理路径,如果不存在则创建 

                if (!System.IO.Directory.Exists(savePath))

                {

                    System.IO.Directory.CreateDirectory(savePath);

                }

                savePath = savePath + name;//上传文件路径

                files[0].SaveAs(savePath);//保存文件 

                context.Response.Write(savePath);

            }

            catch (Exception ex)

            {

                context.Response.Write("FileUpload: " + ex.Message);

            }
        }
Javascript 相关文章推荐
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
js对象的复制继承实例
Jan 10 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
7个有用的jQuery代码片段分享
May 19 #Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 #Javascript
javascript检测两个数组是否相似
May 19 #Javascript
10条建议帮助你创建更好的jQuery插件
May 18 #Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 #Javascript
JQuery中层次选择器用法实例详解
May 18 #Javascript
Jquery中基本选择器用法实例详解
May 18 #Javascript
You might like
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Python实现手绘图效果实例分享
2020/07/22 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
介绍一下Linux中的链接
2016/05/28 面试题
资源工程专业毕业生求职信
2014/02/27 职场文书
汇源肾宝广告词
2014/03/20 职场文书
学生手册评语
2014/05/05 职场文书
文艺晚会策划方案
2014/06/11 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
话题作文之自信作文
2019/11/15 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android