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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
微信小程序实现电子签名并导出图片
May 27 Javascript
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
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
vue观察模式浅析
2018/09/25 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
Python实现类继承实例
2014/07/04 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Python类型转换的魔术方法详解
2020/12/23 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
架构师岗位职责
2013/11/18 职场文书
护士旷工检讨书
2015/08/15 职场文书
趣味运动会口号
2015/12/24 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python