网站开发常用jQuery插件总结(15)上传插件blueimp
在介绍这个插件之前,先吐槽一下。这个插件功能很强大。带有的功能有:上传(单个文件或批量文件),自动上传或点击按钮上传,上传前缩略图显示,判断文件格式,上传前的文件操作,上传时进度条显示等功能。如果你用的是最新的浏览器,那么所有的功能都能正常使用。但如果你或你的用户使用的是ie8(包括ie8)以下的浏览器,那么这个插件对于我们来说就只能使用单文件上传功能。ie9不支持上传前缩略图显示。也就是说这个插件主要是面向ie10+,chrome,firefox新版本浏览器的。
但为什么介绍这个插件呢,主要是因为这个插件是html5开发的,修改样式非常简单,不涉及到flash。在头像设置功能或类别需要设置图片中可以使用。
如果需要兼用更多的浏览器,并实现批量上传图片的功能,还是考虑用flash实现的插件吧,如uploadify。
而在本次测试中,实现的功能是使用blueimp插件+asp.net实现单文件ajax上传。
一、插件功能
结合服务器端开发语言,如asp.net,php等,实现文件上传。
二、官方地址
https://github.com/blueimp/jQuery-File-Upload
在官方地址中有demo演示,但是demo的演示只有前端。可以下载demo,但是我下载的demo不能用。所以我就照着官方文档开始测试。按照官方文档,前端很好实现。但是服务端的实现,有其它语言的说明,asp.net的只提供了一个demo。我下载了这个demo,带有批量上传,在chrome运行下是成功的。所以我照着这个文件又写了服务器端的代码。
三、插件使用
1.引用文件。在这里只实现单文件上传,文件格式写代码判断。
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<!--jquery.fileupload.css是插件自动样式文件,主要用于隐藏file-->
<link href="css/jquery.fileupload.css" rel="stylesheet" type="text/css"/>
<!--按钮的样式文件,这个文件可以不引用-->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
2.Css样式文件。主要是上传按钮的样式。可以看bootstrap.min.css
3.Js代码。主要参考自官方文档。
$(function () {
$('#fileupload').fileupload({
//replaceFileInput: false,
dataType: 'json',
url: '<%=ResolveUrl("upload.ashx") %>',
add: function (e, data) {
debugger;
//写正则判断
var re = /^.+\.((jpg)|(png))$/i;
$.each(data.files, function (index, file) {
//文件格式正确,上传
if (re.test(file.name)) {
data.submit();
}
});
},
done: function (e, data) {
$.each(data.result, function (index, file) {
//上传完毕后显示图片
$('#result').html('<img src="data:images/' + file + '"/>');
});
} });
});
4.使用到的html代码。主要有一个按钮,一个file,一个div组成。div用于显示返回的图片,上传完毕后显示图片。
<div class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>ajax自动上传</span>
<input id="fileupload" type="file" name="file"/>
</div>
<div id="result"> </div>
5.asp.net代码。在后台再次判断文件格式,压缩图片尺寸大小,然后保存。上传图片的更多操作可以看:asp.net图片上传操作总结。主要代码可以下载下面的“测试文件”
if (context.Request.Files.Count > )
{
var file = context.Request.Files[];
if (Path.GetExtension(file.FileName).ToLower() != ".jpg" || Path.GetExtension(file.FileName).ToLower() != "png")
{
string path = context.Server.MapPath("~/images");
string filename = Path.Combine(path, file.FileName);
//file.SaveAs(filename);
using(System.Drawing.Image image = System.Drawing.Image.FromStream(file.InputStream))
{
//将图片尺寸压缩在保存,宽度最大为600,高度最大为600
//按比例压缩
PicHelper helper=new PicHelper(image,,);
helper.CreateNewPic(filename);
}
var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
var result = new { name = file.FileName };
context.Response.Write(serializer.Serialize(result));
} }
四、测试说明
测试环境:chrome,firefox,ie9
开发环境:vs2010
测试图片:
测试文件下载:http://www.1100w.com/wp-content/uploads/2013/10/UploadTest1.rar
网站开发常用jQuery插件总结(15)上传插件blueimp的更多相关文章
- js插件---IUpload文件上传插件(包括图片)
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- 网站开发常用jQuery插件总结(六)关键词说明插件cluetip
我们开发的网站,总有它一定的用途.如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验.既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容).例如企业站的关键词大部分 ...
- 网站开发常用jQuery插件总结(七)背景插件backstretch
一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站 ...
- 网站开发常用jQuery插件总结(14)图片修剪插件Jcrop
一.插件功能 用于对图片进行修剪.但是在使用Jcrop时,还需要配合服务器端开发语言(如asp.net,php等)使用. 二.官方地址 http://deepliquid.com/content/Jc ...
- 【原创】MVC项目中使用JQuery的upladify图片上传插件相关问题的解决方案
一. 关于Uploadify Uploadify是一个jQuery插件,你可以很容易的为你的网站添加多个文件上传功能.有两个不同的版本(HTML5和Flash)允许你灵活选择为您的网站和回退方法正确实 ...
- jQuery File Upload 文件上传插件使用一 (最小安装 基本版)
jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...
- jQuery File Upload文件上传插件简单使用
前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...
- jquery之ajaxfileupload异步上传插件
点我下载工程代码由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/d ...
- 【文件上传】jquery之ajaxfileupload异步上传插件
来自:http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用J ...
随机推荐
- DATASNAP倒底能承受多大的负载能力
DATASNAP是针对企业数据中间件市场而推出来的产品,如果在其它领域用它可能就不会合适. DATASNAP通信使用INDY10,INDY是阻塞型SOCKET. 1.如果使用TCP/IP长连接,DAT ...
- localstorage本地存储
前段时间项目上用到了本地存储,所以研究看了下,在这做下笔记. 本地存储是一个window的一个属性,分别是localStorage和sessionStorage,两者用法完全相同,只不过一个是sess ...
- testlink邮件设置(centos 7)
上一篇文章在centos 7上安装了testlink(CentOS 7下安装xampp和testlink),本篇进行邮件设置,可在进行testlink密码修改.用例指派时进行邮件通知 1.修改conf ...
- DataSet、DataTable和DataGridView知识备忘
datatable中,获取第i行j列的单元格内容: string str = DataSet.Tables[0].Rows[i][j].ToString():datagridv ...
- Runtime 函数 Swizzling 改变OC方法的调度顺序
首先加入一个小知识: SEL.Method.IMP的含义及区别 在运行时,类(Class)维护了一个消息分发列表来解决消息的正确发送.每一个消息列表的入口是一个方法(Method),这个方法映射了一对 ...
- 删除已分配IP的静态IP地址池
如果静态IP地址池已经分配了IP,则无法直接将其静态IP地址池删除,会提示出错:“已经有IP被分配,需要先将其回收,再删除” 如下: 查看IP地址池: Get-SCStaticIPAddressPoo ...
- 深入理解计算机系统第二版习题解答CSAPP 2.6
使用打印字节的方式可以知道十进制数12345的十六进制为0x00003039,十进制浮点数12345.0的十六进制为0x4640E400. 转换为二进制为 /* 0 0 0 0 3 0 3 9 *** ...
- maven主仓库中找不到restlet的解决办法
解决办法: 修改Pom.xml 增加 <repositories> <repository> <id>maven-rest ...
- C#汉字转拼音首字母
输入汉字,提取其首字母: /// <summary> /// 汉字转拼音缩写 /// Code By /// 2004-11-30 /// </summary> /// < ...
- 企业级应用架构(三)三层架构之数据访问层的改进以及测试DOM的发布
在上一篇我们在宏观概要上对DAL层进行了封装与抽象.我们的目的主要有两个:第一,解除BLL层对DAL层的依赖,这一点我们通过定义接口做到了:第二,使我们的DAL层能够支持一切数据访问技术,如Ado.n ...