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 相关文章推荐
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
mock.js模拟前后台交互
Jul 25 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中文乱码
2009/11/26 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Django中使用group_by的方法
2015/05/26 Python
Python实现图像几何变换
2015/07/06 Python
python3字符串操作总结
2019/07/24 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
即将毕业大学生自荐信
2014/01/24 职场文书
入学证明
2015/06/23 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
Python pyecharts绘制条形图详解
2022/04/02 Python