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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
jQuery动画与特效详解
Feb 01 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
ElementUI中el-tree节点的操作的实现
Feb 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检测文本的编码
2015/07/26 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
js实现简单的打印表格
2020/01/15 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Python实现动态循环输出文字功能
2020/05/07 Python
深入了解python列表(LIST)
2020/06/08 Python
李宁官方网店:中国运动品牌
2017/11/02 全球购物
区三好学生主要事迹
2014/01/30 职场文书
工会主席岗位责任制
2014/02/11 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
青年志愿者活动总结
2014/04/26 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
期中考试复习计划
2015/01/19 职场文书
主持人开幕词
2015/01/29 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python