jQuery插件uploadify实现ajax效果的图片上传


Posted in Javascript onJune 18, 2016

昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手。

首先我们先参考别人的资料(我自己整理了一下)

可选项

需要参数类型 参数名字 解释
(布尔型) auto 当文件被添加到队列时,自动上传。
(字符串) buttonImg 浏览按钮的背景图片路径。
(字符串) buttonText 默认在按钮上显示的文本。
(字符串) cancelImg 取消按钮的背景图片路径。
(字符串) checkScript 用以检查服务器上已存在文件的后台脚本的路径。【译者注:应该是ajax方式】
(字符串) displayData 在上传过程中显示在队列里的数据类型。
(字符串) expressInstall expressInstall.swf文件的路径。
(字符串) fileDataName 后台脚本中要处理的file域的名称。【译者注:就是type为file的input的name值】
(字符串) fileDesc 在浏览窗口底部的文件类型下拉菜单中显示的文本。
(字符串) fileExt 允许上传的文件后缀。【译者注:.jpg/.png等】
(字符串) folder 上传文件夹的路径,文件上传后将被保存于此。
(整型) height 浏览按钮的高度。
(布尔型) hideButton 设置为true将隐藏flash按钮,这样你就可以为下面的div元素定义样式。
(字符串) method 向后台脚本放送数据的表单方法。
(布尔型) multi 设置为true将允许多文件上传。
(字符串) queueID 页面中,你想要用来作为文件队列的元素的id。
(整型) queueSizeLimit 上传队列中所允许的文件数量。
(布尔型) removeCompleted 设置为true将自动移除队列中已经完成上传的项目。
(布尔型) rollover 设置为true将激活浏览按钮的鼠标划过状态。
(字符串) script 处理文件上传的后台脚本的路径。
(字符串) scriptAccess 设置在主swf文件中的脚本访问模式。
(JSON) scriptData 在文件上传时,应该被发送给后台脚本的一个包含name/value键值对以及一些额外信息的json对象。
(整型) simUploadLimit 允许同时上传的文件数量。
(整型) sizeLimit 上传文件的大小限制,单位为字节。
(字符串) uploader uploadify.swf文件的路径。
(整型) width 浏览按钮的宽度。
(字符串) wmode flash文件的wmode。

事件

(函数) onAllComplete 当上传队列中的所有文件都完成上传时触发。
(函数) onCancel 当从上传队列每移除一个文件时触发一次。
(函数) onCheck 在上传开始之前,如果检测到一个同名文件时触发。
(函数) onClearQueue 当uploadifyClearQueue()方法被调用时触发。
(函数) onComplete 每完成一次文件上传时触发一次。
(函数) onError 当上传返回错误时触发。
(函数) onInit 当Uploadify实例被载入时触发。
(函数) onOpen 当上传队列中的一个文件开始上传时就触发一次。
(函数) onProgress 在上传过程中触发。
(函数) onQueueFull 当文件数量达到上传队列限制时触发。
(函数) onSelect 每向上传队列添加一个文件时触发。
(函数) onSelectOnce 每向上传队列添加一个或一组文件时触发。
(函数) onSWFReady 当flash文件载入完成时触发。

方法

.uploadify() 创建Uploadify上传组件的一个实例。
.uploadifyCancel() 从上传队列移除一个文件。如果文件正在上传,该方法将先取消上传,然后再将文件移除出上传队列。
.uploadifyClearQueue() 将所有文件移除出上传队列,并且取消正在执行的所有上传。
.uploadifySettings() 改变Uploadify组件的可选参数。
.uploadifyUpload() 触发上传。

这里会用到一些参数,但是我们并不需要完全的掌握这些参数,用之前看看有哪些参数,倒是自己会用哪些参数就ok。

由于时间有限,我把核心的代码先发出来,供大家参考:

在<head>标签中先应用css样式   <link href="../Plugin/uploadify.css" rel="stylesheet" type="text/css" />路径这里你的可能和我的不一样

接着再在<head>标签中应用js,js代码注意先后顺序,不然会报错。

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script src="../Plugin/swfobject.js" type="text/javascript"></script>
<script src="../Plugin/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>

同样这里路径是改成你自己的路径。uploaddiy是用jquery开发的,那我们就要先应用jquery才可以再使用uploaddiy所以要注意应用js的时候注意先后顺序

接着是核心的html代码

<tr>
<th scope="row">图 片:</th>
<td>
<div style="float:left;width:125px;height:35px;">
 
<input type="file" name="uploadify" id="uploadify" /> <%--上传时的进度条--%>
 </div>
 <div id="fileQueue" style="float:left;height:35px;"></div>
 <div style="float:left;height:35px;">
 
<a href="javascript:$('#uploadify').uploadifyUpload()" class="btn-lit"><span>上传</span></a>
  <a href="javascript:$('#uploadify').uploadifyClearQueue()" class="btn-lit"><span>取消上传</span></a>
 </div>
</td>
</tr>
<tr>
  <th scope="row"> </th>
  <td><asp:Image ID="pic" runat="server" /></td>
<%--成功上传生成图片预览功能--%>
</tr>

写的时候写在form的table表中

接着我们开始完成控件给我们需要完成的接口代码如下:

//uploadify插件的自定义设置
$(document).ready(function () {
 $("#uploadify").uploadify({
  'uploader': '../Plugin/uploadify.swf',
  'script': 'UploadImg.ashx',
  'cancelImg': '../Plugin/cancel.png',
  'folder': '../upload',
  'buttonText': 'SELECT Pic',
  'fileExt': '*.jpg;*.gif,*.png',     //允许上传的文件格式为*.jpg,*.gif,*.png
  'fileDesc': 'Web Image Files(.JPG,.GIF,.PNG)', //过滤掉除了*.jpg,*.gif,*.png的文件
  'queueID': 'fileQueue',
  'sizeLimit': '2048000',       //最大允许的文件大小为2M
  'auto': false,         //需要手动的提交申请
  'multi': false,         //一次只允许上传一张图片
  'onCancel': funCancel,       //当用户取消上传时
  'onComplete': funComplete,      //完成上传任务
  'OnError': funError        //上传发生错误时
 });
});

//用户取消函数
function funCancel(event, ID, fileObj, data) {
 jBox.tip('您取消了' + fileObj.name + '操作', 'info');
 return;
}

//图片上传发生的事件
function funComplete(event, ID, fileObj, response, data) {
 //$("#pic").html('<img id="pic" runat="server" src=../upload/' + response + '.jpg style="width:300;height:200px;"/>');
 if (response == 0) {
  jBox.tip('图片' + fileObj.name + '操作失败', 'info');
  return;
 }
 $("#pic").attr("src", "../upload/" + response).height(200).width(300);
 jBox.tip('图片' + fileObj.name + '操作成功', 'info');
 return;
}

//上传发生错误时。
function funError(event, ID, fileObj, errorObj) {
 jBox.tip(errorObj.info);
 return;
}

接着我们来完成一般处理时间的文件,代码如下:

context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";

HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";

if (file != null)
{
 //if (File.Exists(uploadPath + file.FileName))
 //{
 // context.Response.Write("3");   //文件已经存在
 // return;
 //}

 string[] fn = file.FileName.Split('.');
 string ext = fn[fn.Length - 1];
 string filename = DateTime.Now.ToString("yyyyMMddhhmmss")+"."+ext;
 if (!Directory.Exists(uploadPath))
 {
  Directory.CreateDirectory(uploadPath);
 }
 file.SaveAs(uploadPath + filename);
 //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
 context.Session[context.Session["userName"].ToString()] = filename;
  
 context.Response.Write(filename);
}
else
{
 context.Response.Write("0");
}

成功上传返回文件的名字,失败的话返回一个0,js不追返回值,如果是0表示失败,如果不是0则动态的给img加载src。

源码下载:http://xiazai.3water.com/201606/yuanma/jQuery-uploadify-ajax-upload(3water.com).rar

Javascript 相关文章推荐
jQuery chili图片远处放大插件
Nov 30 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
JavaScript的this关键字的理解
Jun 18 #Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 #Javascript
jQuery UI Bootstrap是什么?
Jun 17 #Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 #Javascript
JavaScript获取当前url根目录(路径)
Jun 17 #Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 #Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP中的extract的作用分析
2008/04/09 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
小区物业门卫岗位职责
2014/04/10 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年宣传工作总结
2014/11/18 职场文书
三好学生评语大全
2014/12/29 职场文书
后勤工作个人总结
2015/02/28 职场文书
村党组织公开承诺书
2015/04/30 职场文书
教师岗位说明书
2015/09/30 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
小学记事作文之200字
2019/08/06 职场文书
古诗之感恩老师
2019/10/24 职场文书