jQuery插件uploadify实现ajax效果的图片上传
昨天做了一天的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.jb51.net/201606/yuanma/jQuery-uploadify-ajax-upload(jb51.net).rar
相关推荐
-
jQuery移动端图片上传组件
本文实例为大家分享了移动端图片上传组件,供大家参考,具体内容如下 Imageupload 使用File API+canvas 客户端压缩图片,并实现文件上传服务端 文件依赖 JQUERY 参数API loading:'.loading', 页面显示loading的图标selector url:'', 接收数据的api接口地址 maxFileSize:1010241024, 服务端支持的最大单文件大小 format:/^image/i, 支持的文件格式. images text ..... isC
-
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
本文介绍了头像裁剪上传功能,用到的技术有 jQuery,springmvc,裁剪插件用的是jcrop(中间遇到很多坑,最终跨越). 图片上传步骤: 1.用户选择图片 2.将图片传入后台:用户选择图片的时候选择的是各种各样的,但是我们的网页显示图片大小是有限的,所以我们就要在用户选择图片之后将图片添加到后台进行压缩,压缩成我们想要的大小,之后再显示到页面才好 3.利用jcrop裁剪工具对图片进行裁剪并且实时预览 4.点击确定按钮将裁剪用到的参数传入后台,后台图片进行剪切,之后缩放成我们需要的格式
-
jquery.uploadView 实现图片预览上传功能
图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src=&quo
-
基于JQuery实现图片上传预览与删除操作
本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码,经测试目前满足谷歌.火狐.360.IE6,7,8,9,10,11等浏览器,供大家参考,具体内容如下 1. preview.2.0.html <!DOCTYPE html> <html> <head> <title>上传图片预览</title> <meta http-equiv="content-type" content="text/html;
-
jQuery实现本地预览上传图片功能
本文实例介绍了基于JQUERY扩展,图片上传预览插件,目前兼容浏览器(IE 谷歌 火狐) 不支持safari,分享给大家供大家参考,具体内容如下 HTML代码: <html> <head> <title>图片上传预览演示</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javas
-
jquery实现图片上传前本地预览功能
本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下 介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用.直接上代码. html部分: 复制代码 代码如下: <img id="pic" src="" > <input id="upload" name="file" accept="image/*
-
jQuery插件uploadify实现ajax效果的图片上传
昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手. 首先我们先参考别人的资料(我自己整理了一下) 可选项 需要参数类型 参数名字 解释 (布尔型) auto 当文件被添加到队列时,自动上传. (字符串) buttonImg 浏览按钮的背景图片路径. (字符串) buttonText 默认在按钮上显示的文本. (字符串) cancelImg 取消按钮的背景图片路径. (字符串) check
-
PHP+jQuery+Ajax实现多图片上传效果
今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met
-
php+ajax+h5实现图片上传功能
本文实例为大家分享了php实现ajax图片上传的具体代码,供大家参考,具体内容如下 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="__PUBLIC__
-
ajax +NodeJS 实现图片上传实例
前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note(注意) 大家先在public目录下创建一个名为uploads的文件夹,这个文件夹是用来保存你上传过的图片 安装multer模块: npm i -S multer code(代码) 1.app.js const express = require('express'); const multer = requi
-
jquery 图片上传按比例预览插件集合
js部分是这样的: 复制代码 代码如下: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:iddqd5376@163.com //http://blog.sina.com.cn/iddqd //版本:1.0 //说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片
-
Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 <input type='file' name='pic'> 当我们点击表单的时候提示选择需要上传的图片.但是此需求我们分析一下,可以在点击图片的时候使用JS实现预览功能,并且楼主也是这样做的.代码如下: function getFileUrl(source
-
Java通过jersey实现客户端图片上传示例
在上一篇笔记 <SpringMVC实现图片上传>记录了将图片上传到本地的实现,在很多项目中都会有一台专门的文件服务器来保存文件的,这边记录下客户端通过jersey上传图片到文件服务端的实现. 由于要在不同主机上上传文件,所以不能直接通过流的方式来写,需要通过webService来完成,jersey是基于Java的一个轻量级RESTful风格的Web Services框架,它让客户端文件上传变得更简单. 1. maven依赖 spring的一些包以及fileupload和io包这边就不贴出来了.
-
HTML5+Canvas调用手机拍照功能实现图片上传（下）
上一篇只讲到前台操作,这篇专门涉及到Java后台处理,前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理,通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至服务器进行保存,并且将图片的路径地址存进数据库. 大家可以点此链接查看前台本地压缩上传的处理: HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(上) ok,废话不多说了,直接贴代码吧. 1.前台js代码: $.ajax({ async:false,//是
-
jQuery自定义图片上传插件实例代码
摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q
-
聊一聊jQuery插件uploadify使用方法
说说自己使用uploadify的一波三折的曲折过程: 之所以要选择uploadify,是源于自己先前使用过jQuery官网的上传文件插件,比较难用(页面写的代码比较多,IE下后台回传需要配置格式[不清楚其他上传插件是否也是这样]),而且一直有IE9上传不成功的问题,到我离开上家公司的时候也一直没有解决这个问题(可能是本人比较low的原因吧).所以在使用插件之前先调研了一下.uploadify提供两个版本,flash的uploadify和html5的uploadFive.文档还是比较齐全的,网上的