WebUploader官方例子看的不是很清楚,自己也是费了点劲自己写了一下。

需求:一个单页需要多个实例来上传,一次可上传多张

条件:后台接收C#

首先:引入webuploader     webuploader.css   webuploader.js

html:<div class="filePicker">上传</div>

Jquery:$(function(){

uploader = WebUploader.create({
auto: true,
swf: '/Swf/Uploader.swf',
server: '',//后台接收图片的url (我用的是C#)
fileVal: 'upload',
pick: '.filePicker',//html class
resize: false,
duplicate: true,//可以重复上传 但是筛选不了重复图片
});
uploader.on('uploadSuccess', function (file, data) {
var uploaderId = '#rt_' + file.source.ruid;//每个实例的唯一ID (自己写的时候这是个突破口,时间主要花在这个上面了.... 下面可以通过这个自由发挥了)
自由发挥空间
});
uploader.on('uploadError', function (file) {
var $li = $('#' + file.id),
$error = $li.find('div.error');
if (!$error.length) {
$error = $('<div class="error"></div>').appendTo($li);
}
$error.text('上传失败!!!');
}); });

  

后台接收文件代码:C#

{//上传资料
ResultModelData result = new ResultModelData();
string fileName = string.Empty;
string savePath = string.Empty;
var fileSize = 0;
if (HttpContext.Current.Request.Files.Count > 0)
{
using (System.IO.Stream s = HttpContext.Current.Request.Files[0].InputStream)
{
fileSize = HttpContext.Current.Request.Files[0].ContentLength;
fileName = HttpContext.Current.Request.Files[0].FileName;
if (Bas_FileBLL.UploadAudit(s, fileName, out savePath))
{ result.Code = 1;
result.Message = TipCodeType.TipCode.操作成功.ToString();
result.Data = new { size = fileSize, fileName = fileName, path = savePath };
return result;
}
result.Code = -1;
result.Message = "上传失败";
return result;
}
}
result.Code = -1;
result.Message = "文件为空";
return result;
}

  

WebUploader——一个页面多个实例上传图片的更多相关文章

  1. ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  2. php中实现的一个curl批处理的实例

    curl是利用URL语法在命令行方式下工作的开源文件传输工具 本文在php中实现了的一个curl批处理的实例. 代码如下: header("Content-Type:text/html;ch ...

  3. 用js把数据从一个页面传到另一个页面

    用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...

  4. 开发一个微信小程序实例教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  5. Bootstrap--模仿官网写一个页面

    本文参考Bootstrap官方文档写了简单页面来熟悉Bootstrap的栅格系统.常用CSS样.Javascript插件和部分组件. 以下html代码可以直接复制本地运行: BootstrapPage ...

  6. (微信小程序)二 : 创建一个页面

    首先先看一下pages的目录结构吧. 我创建了一个topics页面.3个文件全创建好了之后 我往topics.js添加数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  7. (微信小程序)二 : 创建一个页面。

    首先先看一下pages的目录结构吧. 我创建了一个topics页面.3个文件全创建好了之后 我往topics.js添加数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  8. Eucalyptus-利用镜像启动一个Windows Server 2008r2实例

    1.前言 使用kvm制作Eucalyptus镜像(Windows Server 2008r2为例)——http://www.cnblogs.com/gis-luq/p/3990792.html 上一篇 ...

  9. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

随机推荐

  1. ZOJ3732 Graph Reconstruction Havel-Hakimi定理

    分析: 给定一个非负整数序列{dn},若存在一个无向图使得图中各点的度与此序列一一对应,则称此序列可图化. 进一步,若图为简单图,则称此序列可简单图化 (来自百度百科) 可简单图化的判定可以用Have ...

  2. Oracle10g数据类型

    1.     字符类型 数据类型 长度 说明 CHAR(n BYTE/CHAR) 默认1字节,n值最大为2000 末尾填充空格以达到指定长度,超过最大长度报错.默认指定长度为字节数,字符长度可以从1字 ...

  3. JZ2440开发笔记(6)——存储控制器

    存储控制器与CPU及其它外设的关系 我们看到cpu上集成了一个存储管理器,外围的存储设备都接在这个存储管理器上.cpu负责发出命令,其它的一切工作都交给了存储管理器.那么存储管理器是如何来管理这些外设 ...

  4. IIS7 性能(内存、CPU、当前请求耗时)监测

    程序上线了,但运行过程中如果发现很CPU.内存异常,某些操作耗时,如何在生产环境中监测并查明原因呢,有以下几种工具(方式): 1.NProfiler,这是一个商业软件,有试用周期,可以监测包括Winf ...

  5. 各种sensor名称统计

    gyroscopes 陀螺仪accelerometers 加速度计magnetometers 磁力计barometric pressure 气压remote pressure sensing 远程压力 ...

  6. 用BigDecimal类实现Fibonacci算法

    Fibonacci(N)=Fibonacii(N-1)+Fibonacci(N-2) 其中 Fibonacci(0)=0;Fibonacci(1)=1 用循环或则递归实现Fibonacci算法很简单, ...

  7. HDU4737 - A Bit Fun(线段树)

    题目大意 给你一个数组a,定义f(i,j)=ai|ai+1|ai+2|⋯|aj ,|为or运算,求满足f(i,j)<m的二元组个数,N≤105,m≤230 题解 枚举起点i,然后找出最靠右的k, ...

  8. spring注入Properties

    最近项目中向将某个Properties注入到Bean中,经百度知以下代码. <bean id="settings" class="org.springframewo ...

  9. A Tour of Go Multiple results

    A function can return any number of results. This function returns two strings. package main import ...

  10. HTML5终极备忘大全

    二.文字备忘之标签 HTML5中新增的标签 <article> 定义文章 <aside> 定义页面内容旁边的内容 <audio> 定义声音内容 <canvas ...