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事件列表解说
Dec 22 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 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和MySql来与ODBC数据连接
2006/10/09 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
JavaScript 学习笔记之操作符
2015/01/14 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
python编程嵌套函数实例代码
2018/02/11 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
python操作yaml说明
2020/04/08 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
python实现AdaBoost算法的示例
2020/10/03 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
董事长助理岗位职责
2014/02/18 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
关于工作经历的证明书
2014/10/11 职场文书
给校长的建议书作文400字
2015/09/14 职场文书