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 相关文章推荐
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
关于js datetime的那点事
Nov 15 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
如何利用React实现图片识别App
Feb 18 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
ThinkPHP的L方法使用简介
2014/06/18 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
Python异常处理总结
2014/08/15 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
办公室前台岗位职责范本
2013/12/10 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
九年级语文教学反思
2014/02/04 职场文书
初三新学期计划书
2014/05/03 职场文书
《假如》教学反思
2016/02/17 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android