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鼠标划过切换效果
Jun 30 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
JavaScript 数组去重详解
Sep 15 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
?繁体转换的class
2006/10/09 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
如何提高数据访问速度
2016/12/26 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
vue如何判断dom的class
2018/04/26 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
详解node.js 事件循环
2020/07/22 Javascript
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
python脚本定时发送邮件
2020/12/22 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
建国大业电影观后感
2015/06/01 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技