plupload简易应用 多图片上传显示预览以及删除
<script> var uploader = new plupload.Uploader({ //实例化一个plupload上传对象 browse_button: 'btnBrowse', url: 'upload.ashx', flash_swf_url: 'Resource/scripts/js/Moxie.swf', silverlight_xap_url: 'Resource/scripts/js/Moxie.xap', filters: { mime_types: [ //只允许上传图片文件 { title: "图片文件", extensions: "jpg,gif,png" } ] } }); uploader.init(); //初始化 //绑定文件添加进队列事件 uploader.bind('FilesAdded', function (uploader, files) { // alert(files[0].size); var msgFlg = 0; for (var i = 0, len = files.length; i < len; i++) { if (files[i].size > 81920) { uploader.files.splice(i, 1); msgFlg = 1; } else { !function (i) { previewImage(files[i], function (imgsrc) { $('#file-list').html($('#file-list').html() + '<div style="float:left" class="pic_list" id="' + files[i].id + '">' + ' (' + plupload.formatSize(files[i].size) + ')<a href="###" class="pic_delete" data-val=' + files[i].id + '>删除</a><br/>' + '<img class="listview" width="90" height="60" src="' + imgsrc + '" name="' + files[i].name + '" /></div>'); }) }(i); } } if (msgFlg == 1) { alert("上传图片小于80K"); } }); $(document).on('click', '.pic_list a.pic_delete', function () { $(this).parent().remove(); var toremove = ''; var id = $(this).attr("data-val"); for (var i in uploader.files) { if (uploader.files[i].id === id) { toremove = i; } } uploader.files.splice(toremove, 1); }); //所有都上传完成 uploader.bind("UploadComplete", function (uploader, file) { alert("成功"); $('#file-list').html(""); exit(); }); function exit() { window.parent.location.href = window.parent.location.href; } //plupload中为我们提供了mOxie对象 //有关mOxie的介绍和说明请看:https://github.com/moxiecode/moxie/wiki/API //如果你不想了解那么多的话,那就照抄本示例的代码来得到预览的图片吧 function previewImage(file, callback) {//file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数 if (!file || !/image\//.test(file.type)) return; //确保文件是图片 if (file.type == 'image/gif') {//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png var fr = new mOxie.FileReader(); fr.onload = function () { callback(fr.result); fr.destroy(); fr = null; } fr.readAsDataURL(file.getSource()); } else { var preloader = new mOxie.Image(); preloader.onload = function () { //preloader.downsize(550, 400);//先压缩一下要预览的图片,宽300,高300 var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据 callback && callback(imgsrc); //callback传入的参数为预览图片的url preloader.destroy(); preloader = null; }; preloader.load(file.getSource()); } } $("#update").bind('click', function () { if (uploader.files.length < 1) { alert('请选择图片!'); return false; } uploader.start(); }) </script>
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write("Hello World"); UploadFile(context); } /// <summary> /// 上传图片 /// </summary> /// <param name="context"></param> private void UploadFile(HttpContext context) { try { // 共通DB时间BLL BLL.GetTimeCommonBusiness comBll = new BLL.GetTimeCommonBusiness(); context.Response.CacheControl = "no-cache"; string s_rpath = "E:\\NewB2B\\04_源代码\\B2B.root\\B2B\\WEB\\upload\\resource"; // 保存图片名做成 ).Replace("-", "").Replace(":", "").Replace(" ", "").Replace("/", "").Replace(".", ""); , context.Request[); // 图片上传 ) { HttpPostedFile uploadFile = context.Request.Files[]; ) { if (!Directory.Exists(s_rpath)) { Directory.CreateDirectory(s_rpath); } } uploadFile.SaveAs(string.Format("{0}\\{1}", s_rpath, name)); } // 图片地址添加 if (context.Session["SL0005EDIT$Photopath"] == null) { ArrayList list = new ArrayList(); list.Add( name); context.Session["SL0005EDIT$Photopath"] = list; } else { ArrayList list = (ArrayList)context.Session["SL0005EDIT$Photopath"]; list.Add( name); context.Session["SL0005EDIT$Photopath"] = list; } } catch (Exception) { throw; } } public bool IsReusable { get { return false; } }
plupload简易应用 多图片上传显示预览以及删除的更多相关文章
- 微信小程序实现图片上传,预览,删除
wxml: <view class='imgBox'> <image class='imgList' wx:for="{{imgs}}" wx:for-item= ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
- DevExpress控件使用系列--ASPxUploadControl(图片上传及预览)
1.控件功能 列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http: ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- JQuery插件:图片上传本地预览插件,改进案例一则。
/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
随机推荐
- Python for loop and while loop
#!pyton2 #-*- coding:utf-8 -*- for letter in "Python": print "Current letter is:" ...
- Redis入门(一)系统安装
硬件环境:Thinkpad T450,Intel i5-5200U CPU @ 2.20GHz × 4 ,8GB RAM 软件环境: ubuntu 14.04.4 (trusty) 一.软件安装 #w ...
- [Spring] - 读写分离
使用Spring可以做到在应用层中实现数据库的读写分离. 参考文档: http://blog.csdn.net/lifuxiangcaohui/article/details/7280202 思路是使 ...
- ocanvas 画板
使用ocanvas做了个简单的在线画板. ocanvas参考:http://ocanvas.org/ 效果如下: 主要代码如下: <!DOCTYPE html> <html> ...
- gulp.js简单操作
一.安装gulp 1.深入设置任务之前,需先安装gulp: $ npm install gulp -g 2.这会将gulp安装到全域环境下,让你可以存取gulp的CLI.接著,需要在本地端的专案进行安 ...
- Nginx基本配置
1.Nginx官网下载安装程序,http://nginx.org/ 2.启动命令 启动:start nginx.exe停止:nginx -s stop 重新加载: nginx -s reload 3. ...
- Node以数据块的形式读取文件
在Node中,http响应头信息中Transfer-Encoding默认是chunked. Transfer-Encoding:chunked Node天生的异步机制,让响应可以逐步产生. 这种发送数 ...
- SQL笔记-第六章,索引与约束
一.索引 CREATE INDEX 索引名 ON 表名(字段1, 字段2,……字段n) CREATE INDEX idx_person_nameage ON T_Person(FName,FAge) ...
- HTTP的GET/POST细节
HTTP的GET/POST方式有何区别?这是一个老生常谈的问题,但老生常谈的问题往往有一些让人误解的结论.本文将带您浅尝HTTP协议,在了 解HTTP协议的同时将会展示许多被人们忽视的内容.在掌握了H ...
- 也说virtualbox下安装centos7
以前一直在VMware Workstation下安装虚拟机系统,这几天由于电脑被别人使用误升级为win10,而导致原来的LNMP不能使用,查找原因在于即使是最新的VM12.1.1也只是支持win8而已 ...