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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
json数据格式常见操作示例
Jun 13 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
第十一节--重载
2006/11/16 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
JS实现多功能计算器
2020/10/28 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
跟老齐学Python之用Python计算
2014/09/12 Python
python操作CouchDB的方法
2014/10/08 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
如何在django中运行scrapy框架
2020/04/22 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
小组口号大全
2014/06/09 职场文书
求职自我评价怎么写
2015/03/09 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android