网站开发常用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 ...
随机推荐
- powerDesigner的初步使用
今天初步学习了PowerDesigner,主要学习的内容有以下几个方面: 1.powerDesigner的功能之一是建立一个数据库的关系图,这里选用的数据库是MySql,基本的建立过程是这样的: a. ...
- ThinkPHP3.1 常量参考
预定义常量 常量 说明 URL_COMMON=0 普通模式 URL URL_PATHINFO=1 PATHINFO URL URL_REWRITE=2 REWRITE URL URL_COMPAT=3 ...
- Google高级技巧—google Hack★★★★
google hacking事实上并算不上什么新东西,当时并没有重视这样的技术,觉得webshell什么的,并无太大实际用途.google hacking事实上并非如此简单... 经常使用的googl ...
- Thread和Runnable、run和start的区别
多线程可以通过两种方式来创建: 一.通过继承Thread类. 二.通过实现Runnable接口. 那么中两种方式到底有什么区别呢?那种方式更好些呢? 先看看几个简单的Demo: Demo1 publi ...
- Linux下安装ACE
ACE 5.6下载地址:http://download.dre.vanderbilt.edu/ 方法一: 1. 解开ACE-install.sh文件 tar –zxvf ACE-5.6.ta ...
- AFNetworking 3.0迁移指南
AFNetworking是一款在OS X和iOS下都令人喜爱的网络库.为了迎合iOS新版本的升级, AFNetworking在3.0版本中删除了基于 NSURLConnection API的所有支持. ...
- javaHDU1003Max Sum
import java.util.Scanner; public class Sum {public static void main(String args[]) {Scanner cin=n ...
- java窗体与Flash交互
最近在研究flash,用flash去读取文件很简单,但是存储文件就很麻烦了. 因此想到用java的窗体进行交互. 下面是DJNativeSwing-SWT-1-0-3-20140708的下载链接: h ...
- java 静态方法
在使用java的时候,你会发现,有些对象,需要new ,有些则不需要时,比如Math类 ); 如果你查看源码就会大致的发现,里面的属性和方法都是静态的: public static double si ...
- wap上传图片跨域发送post请求
wap和接口交互是跨域请求,一般只能通过Jsonp来进行数据的吞吐,然而jsonp只是GET请求,不能发送post请求,所以会对项目需求有所限制. 需求:wap跨域通过接口上传图片. 条件:接口是C# ...