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"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
随机推荐
- 三个loading小动画实例
直接贴代码: <!DOCTYPE html><html><head> <meta charset="utf-8"> &l ...
- Python chr() ord() unichr()
chr()函数用一个范围在range(256)内的(就是0-255)整数作参数,返回一个对应的字符. unichr()跟它一样,只不过返回的是Unicode字符,这个从Python 2.0才加入的un ...
- Storm简介
Storm特性 1. 低延迟和高性能 在一个小集群中,每个节点每秒可以处理数以百万计的消息. 2. 可扩展 在Storm集群中主要有三个实体:工作进程.线程和任务.Storm集群中每台机器上都可以运行 ...
- Vmware vsphere webservice sdk 连接打开慢的问题
还在为VimService实例化速度慢的问题烦恼吗?这有一篇文章可以帮你解决问题,英文水平所限,就不翻译了,原文地址http://kb.vmware.com/selfservice/microsite ...
- ruby的加密方法整理(des rsa加密 加签)
# coding:utf-8require 'openssl'require 'base64'#des加密并且base64编码def des_encrypt des_key, des_text des ...
- (C#) 反转字符串,反转一个句子中单词。
这个是非常基本的一道面试题,但是要考虑周全. 首先反转一个字符串: 基本思路是变成Char数组,然后调用C#里面的方法,或者设定两个index,从头,尾向中间遍历,并交换. 方法一: Array.Re ...
- Angular(2)
1.自定义指令,直接栗子: note:定义指定是驼峰,2部分 前缀+作用,but 调用 改驼峰首字母大写处为 (-首字母小写) <!DOCTYPE html><html lang= ...
- alarm rtc
http://sharp2wing.iteye.com/blog/1329518 http://blog.csdn.net/sking002007/article/details/6593809 io ...
- Python-1 IDLE(Python GUI)
#1 运行Python: 开始 -> 程序 -> Python -> IDLE(Python GUI) 或 开始 -> 输入IDLE #2 各个菜单项及基本用法的帮助: Hel ...
- cisco HSRP实验
实验项目:HSRP 实验目的: 1> 实现拓扑冗余备份. 2> 测试HSRP主备网关倒换.