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 hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
如何提高Dom访问速度
Jan 05 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
Vue实现boradcast和dispatch的示例
Nov 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
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
键盘控制事件应用教程大全
2006/11/24 Javascript
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python实现弹窗祝福效果
2019/04/07 Python
python使用requests.session模拟登录
2019/08/09 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
C++面试题:关于链表和指针
2013/06/05 面试题
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python