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. NET中的引用类型和值类型 zt

    .NET中的类型分为值类型和引用类型,他们在内存布局,分配,相等性,赋值,存储以及一些其他的特性上有很多不同,这些不同将会直接影响到我们应用程序 的效率.本文视图对.NET 基础类型中的值类型和引用类 ...

  2. 【原】Spark中Client源码分析(二)

    继续前一篇的内容.前一篇内容为: Spark中Client源码分析(一)http://www.cnblogs.com/yourarebest/p/5313006.html DriverClient中的 ...

  3. Vim 的粘贴复制功能

    Vim作为最好用的文本编辑器之一,使用vim来编文档,写代码实在是很惬意的事情.每当学会了vim的一个新功能,就会很大地提高工作效率.有人使用vim几十年,还没有完全掌握vim的功能,这也说明了vim ...

  4. HW5.8

    public class Solution { public static void main(String[] args) { System.out.printf("%s\t%s\t%s\ ...

  5. HW3.24

    public class Solution { public static void main(String[] args) { int number = (int)(Math.random() * ...

  6. HW2.5

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  7. Go语言简介

    Go语言简介 - Go语言是由Google开发的一个开源项目,目的之一为了提高开发人员的编程效率. Go语言简介 Go语言是由Google开发的一个开源项目,目的之一为了提高开发人员的编程效率. Go ...

  8. light oj 1153 - Internet Bandwidth【网络流无向图】

    1153 - Internet Bandwidth   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 ...

  9. JBPM学习(一):实现一个简单的工作流例子全过程

    test.png test.jpdl.xml <?xml version="1.0" encoding="UTF-8"?> <process ...

  10. hi3531 SDK 编译 uboot, 改动PHY地址, 改动 uboot 參数 .

    一,编译uboot SDK文档写得比較清楚了,写一下须要注意的地方吧. 1. 之前用SDK里和别人给的已经编译好的uboot,使用fastboot工具都刷不到板子上.最后自己用SDK里uboot源代码 ...