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"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
随机推荐
- Jetty与Tomcat的区别 转
Jetty与Tomcat的区别 由于没有研究过Tomcat,所以区别不好说,这里暂时就网上的一些言论和自己所了解到的一些总结下(摘自于许令波). Jetty 的架构从前面的分析可知,它的所有组件都是基 ...
- 为重负网络优化 Nginx 和 Node.js --引用自https://linux.cn/article-1314-1.html
为重负网络优化 Nginx 和 Node.js 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对.他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器 ...
- 一个很奇怪的重复链接lib的问题
早上在调一个程序的时候感觉非常奇怪,就是数据在初始化的时候会失败,后来发现是获取一个数据的时候出错了 假设我们又一个config.lib,sql.dll和main.exe 因为数据库在打开数据库的时候 ...
- [内核]Takslet和Workqueue的应用场景
转自:http://blog.chinaunix.net/uid-20382483-id-4077101.html tasklet Workqueue 处于atomic context,不能sleep ...
- Tomcat长出现的内存溢出问题
以下内容转载自博客:http://www.cnblogs.com/apaqi/archive/2012/07/09/2582480.html 在eclipse.ini配置文件中加上以下两行 -XX:P ...
- 在命令行中通过adb shell am broadcast发送广播通知
通过命令行执行adb shell am broadcast发送广播通知. adb shell am broadcast 后面的参数有:[-a <ACTION>][-d <DATA_U ...
- 2.Median of Two Sorted Arrays (两个排序数组的中位数)
要求:Median of Two Sorted Arrays (求两个排序数组的中位数) 分析:1. 两个数组含有的数字总数为偶数或奇数两种情况.2. 有数组可能为空. 解决方法: 1.排序法 时间复 ...
- 关于UIView的autoresizingMask属性的研究【转】
在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. 1 2 3 4 5 6 7 8 9 enum ...
- 7,SFDC 管理员篇 - 数据模型 - 公式和验证 1
1,自定义公式 Customize | Your Object | Fields | Add Fields Field SF的公式和Excel的公式差不多,都是支持各种运算和结果 例1,以opport ...
- curl 发送get post请求
function getAction($url=''){ // curl 请求一共分四步,初始化,设置属性,执行并获取结果,释放句柄 // 一.初始化 $curl = curl_init(); // ...