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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
Vue页面骨架屏注入方法
May 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Python3解释器知识点总结
2019/02/19 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
django使用JWT保存用户登录信息
2020/04/22 Python
python3.4中清屏的处理方法
2020/07/06 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
大学生村官事迹材料
2014/01/21 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
小学生评语集锦
2014/04/18 职场文书
《开国大典》教学反思
2014/04/19 职场文书
社区助残日活动总结
2014/08/29 职场文书
圆明园纪录片观后感
2015/06/03 职场文书