初始上传界面

 //链接添加弹窗 html代码段↓
var msgcontent = "";
msgcontent += '<ul class="linkAddBox">';
msgcontent += '<li><p class="Z_pHOTOtIPS p10" style="margin-top:0;display: inline-block;"><b class="Z_TipsIcon fl mr5"></b><span class="fl mt4 color6">说明:一次可以最多可以上传50张.jpg .png .bmp .gif格式的图片,每张不超过10M。按<b>ctrl</b>或<b>shift</b>可选择多张</span></p></li>';
msgcontent += '<li><span> 选择专辑:</span><select class="typeselectdata"><option value="0">全部专辑</option></select></li>';
msgcontent += '<li class="clearfix">';
msgcontent += '<div id="ChoosePhoto"><img src="/Public/Image/Upload.jpg" style=" width: 80px;height: 40px;"/></div>';
msgcontent += '</li> <li><div id="fileList" class="uploader-list clearfix" style="max-height: 300px;overflow: auto;"></div></li></ul>';
//链接添加弹窗 html代码段↑
dia = $.dialog({
title: '添加专辑图片',
content: msgcontent,
fixed: true,
min: false,
max: false,
lock: true,
okVal: '确定',
ok: function() {
return s;//单击确定按钮时暂不关闭弹出框
},
cancelVal: '取消',
cancel: true
});
UploadImge();

控件初始化

//批量上传图片
function UploadImge() {
$list = $(window.parent.document).find('#fileList'),
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 100 * ratio,
thumbnailHeight = 100 * ratio,
// 初始化Web Uploader
uploader = WebUploader.create({
// 自动上传true/false。
auto: false,
// swf文件路径
swf: '/Portal/Js/Common/diyUpload/js/Uploader.swf',
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: $(window.parent.document).find("#ChoosePhoto"),
// 只允许选择文件,可选。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
}
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function(file) { var filetype = file.name.split('.')[1];
var st = false;
switch (filetype) {
case "gif":
st = true;
break;
case "jpg":
st = true;
break;
case "jpeg":
st = true;
break;
case "bmp":
st = true;
break;
case "png":
st = true;
break;
default:
break;
}
if (!st) {
jsprint('请上传正确格式的图片:"gif,jpg,jpeg,bmp,png"!!', '', 'Error');
return false;
}
$(window.parent.document).find(".ui_state_highlight").unbind("click").bind("click", function() {
Tid = $(window.parent.document).find(".typeselectdata option:selected").val();
if (Tid == 0) {
jsprint('专辑不能为空!!', '', 'Error');
return false;
}
var obj = {};
obj = { op: "uploadphoto", Tyid: Tid, navName: navName };
if (uploader.getFiles("inited").length > 0) {
uploader.option("formData", obj);
uploader.option("server", "/Ajax/Manage.ashx");
uploader.upload();
}
else {
jsprint('未选择任何视频文件!!', '', 'Error');
return false;
}
});
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail" style="float: left; margin-left: 5px;">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img'); $list.append($li);
// 创建缩略图
uploader.makeThumb(file, function(error, src) {
if (error) {
$img.replaceWith('<span>不能预览</span>');
return;
} $img.attr('src', src);
}, thumbnailWidth, thumbnailHeight);
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function(file, percentage) {
var $li = $(window.parent.document).find('#' + file.id),
$percent = $li.find('.progress span');
// 避免重复创建
if (!$percent.length) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo($li)
.find('span');
}
$percent.css('width', percentage * 100 + '%');
}); // 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function(file) {
$(window.parent.document).find('#' + file.id).addClass('upload-state-done');
});
// 文件上传失败,现实上传出错。
uploader.on('uploadError', function(file) {
var $li = $(window.parent.document).find('#' + file.id),
$error = $li.find('div.error');
// 避免重复创建
if (!$error.length) {
$error = $('<div class="error"></div>').appendTo($li);
}
$error.text('上传失败');
}); // 完成上传完了,成功或者失败,先删除进度条。
uploader.on('uploadComplete', function(file) {
$(window.parent.document).find('#' + file.id).find('.progress').remove();
if (uploader.getFiles().length == uploader.getStats().successNum) {//当上传成功后重新加载数据
dia.close();//上传完成时关闭弹出框
BindPhotoes(1, 20);//重新加载数据
}
});
}

一般处理程序处理上传图片

 HttpFileCollection fileCollection = cnt.Request.Files;//获取客户端传来的文件六流
if (fileCollection.Count == )
{
//未接收到文件
//防止发生异常
cnt.Response.Write(JsonHelper.SerializeObject(new { status = false, msg = "你未选中任何图片" }));
return;
}
System.Drawing.Image img = System.Drawing.Image.FromStream(fileCollection[].InputStream);
//服务器段相对路径,上传到相册所在的文件夹下
string relativePath = "/Upload/PhotoImage/" + usermodel.xj_UserName + "/" + DateTime.Now.ToString("yyyyMM");
strpath = UploadImg(fileCollection, relativePath);//获得文件存储路径
if (strpath == "")
{
cnt.Response.Write(JsonHelper.SerializeObject(new { status = false, msg = "保存图片发生异常" }));
return;
}

图片处理函数

  /// <summary>
/// 处理上传图片
/// </summary>
/// <param name="Id"></param>
/// <param name="Gid"></param>
/// <returns></returns>
private string UploadImg(HttpFileCollection fileCollection, string relativePath)
{
// 映射到服务器上的物理路径
string physicalPath = cnt.Server.MapPath(relativePath);
if (!Directory.Exists(physicalPath))
{
Directory.CreateDirectory(physicalPath);
}
//以当前时间为随机种子
Random rand = new Random( * (int)DateTime.Now.Ticks);
int fileId = rand.Next();
string ext = fileCollection[].FileName.Split('.').Last().ToLower();
string fileName = fileId + "." + ext;
//保存文件到本地
fileCollection[].SaveAs(physicalPath + fileName);
string filePath = relativePath + fileName;
return filePath;//返回缩略图和原图保存路径
}

依赖弹出框lhdaiglog的基于WebUploader批量上传图片的更多相关文章

  1. 弹出框一 之 基于bootstrap和jquery的自定义弹出框

    (function ($) { window.Ewin = function () { var html = '<div id="[Id]" class="moda ...

  2. 弹出框 popover.js

    弹出框 popover.js 为任意元素添加一小块浮层,就像 iPad 上一样,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 插件依赖 弹出框依赖 工具提示插件 ,因 ...

  3. 自定义弹出框基于zepto 记得引入zepto

    html <!DOCTYPE html> <html> <meta charset="utf-8"> <title></tit ...

  4. 基于HTML5 Canvas 实现弹出框

    用户鼠标移入时,有弹出框出现,这样的需求很常见.这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为Canvas使用的是另外一套机制,无论在 ...

  5. 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢,在Bootstrap模态框内部多次点击才能触发的问题

    WebUploader百度前端团队开源的上传组件,用起来感觉真心不错的,标题的两个问题是我实际使用过程中遇到的问题,经过百度和谷歌查到解决方案, 特分享一下,以供遇到此问题的童靴. 谷歌浏览器弹出框打 ...

  6. .NET MVC 学习笔记(四)— 基于Bootstarp自定义弹出框

    .NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...

  7. 基于js alert confirm样式弹出框

    基于js alert confirm样式弹出框.这是一款根据alert confirm优化样式的确认对话框代码. 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  8. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  9. 基于Selenium2+Java的UI自动化(6)-操作Alert、confirm、prompt弹出框

    alert.confirm.prompt这样的js对话框在selenium1 时代处理起来比价麻烦,常常要用autoit来帮助处理.而现在webdriver对这些弹出框做了专门的处理,使用seleni ...

随机推荐

  1. Java中15种锁的分类综合总结

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  2. leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  3. 微信退款异步通知报错Illegal key size or default parameters 的解决办法

    问题原因: Java几乎各种常用加密算法都能找到对应的实现.因为美国的出口限制,Sun通过权限文件(local_policy.jar.US_export_policy.jar)做了相应限制.因此存在一 ...

  4. [20191112]oracle共享连接模式端口.txt

    [20191112]oracle共享连接模式端口.txt --//如果使用共享服务模式,你可以发现每次重启数据库对应的端口号会发生变化.# netstat -tunlp | egrep "A ...

  5. Redis—数据操作

    redis是key-value的数据,所以每个数据都是一个键值对. 数据操作的全部命令,可以查看中文网站. 键的类型是字符串 值的类型分为五种: 字符串string 哈希hash 列表list 集合s ...

  6. android binder 进程间通信机制3-Binder 对象生死

    以下概述Binder通信过程中涉及到的四个对象:Binder本地对象.Binder实体对象.Binder引用对象.Binder代理对象的生死. 1.Binder通信的交互过程 1.Client 进程发 ...

  7. CodeForces 1238C(思维+贪心)

    题意 https://vjudge.net/problem/CodeForces-1238C 您现在正在玩一个游戏,您初始在一个高度 h 的悬崖 悬崖沿壁高度为 1-h 的这些位置均有平台,平台有两种 ...

  8. React中条件渲染

    17==> 条件渲染 state初始化一般写在构造器当中 CharShop.js如下 import React, { Component } from "react"; ex ...

  9. python 格式化打印

    #coding=utf-8 import time; start_time = time.time()for a in range(0,1001): for b in range(0,1001): f ...

  10. LeetCode 1248. 统计「优美子数组」

    地址 https://www.acwing.com/solution/leetcode/content/5801/ 题目描述给你一个整数数组 nums 和一个整数 k. 如果某个子数组中恰好有 k 个 ...