最近在学习百度的开源上传组件WebUploader，上一篇文章，学习了批量文件上传，今天学习一下批量图片上传，实际上与文件上传很类似，只是添加了图片显示功能，这个功能WebUploader组件中已经提供了。

一： 下面就是利用WebUploader组件，让客户一次选择多个文件，然后将选择的文件上传到服务器的批量文件解决方案。

让我们先来看看客户端的界面效果图。（多选文件，批量上传，上传进度显示）

1) 显示界面：

图1

2) 进行多文件选择：

图2

注：跟上一篇文章WEB版一次选择多个文件进行批量上传(WebUploader)的解决方案 中比较，可以看出，这次只显示了图片，没有显示压缩文件与可执行文件。

3) 上传进度显示

图3

图4

说明：见上图WebUploader默认是3个线程一起并发上传文件。如果需要增加并发数，或是减少并发数。可以修改threads属性，这个属性就是允许的最大上传并发数。

3) 上传成功显示

图5

二：具体的代码与操作步骤：

第一步，要进行下面的过程，必须先准备好WebUploader组件。
1) WebUploader:大家可以访问WebUploader官方网站：http://fex.baidu.com/webuploader/download.html，在这个网站上可以下载到组件与demo。

第二步,创建应用的目录结构，我这个示例的目录结构如图：
1.主要目录结构

2. 文件上传用到的js脚本文件与css文件。

第三步，前台部分准备客户操作的WEB界面，如下[WebUploaderFileByBaidu.aspx、UploaderFileByBaidu.ashx]

1) 前台客户端代码，其中WebUploaderFileByBaidu.aspx的代码如下，WebUploaderFileByBaidu.aspx.cs文件中只使用默认的代码，不用添加任何代码。
WebUploaderFileByBaidu.aspx
Html代码

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebUploaderFileByBaidu.aspx.cs" Inherits="WebApplication1.WebUploaderFileByBaidu" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.  
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  9.  
  10.     <title></title>   
  11.  
  12.     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>  
  13.  
  14.       <link href="Scripts/webuploader/webuploader.css" rel="stylesheet" />
  15.     <script type="text/javascript" src="Scripts/webuploader/webuploader.min.js"></script>
  16.     <link href="https://cdn.bootcss.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
  17.     <link href="Scripts/style.css" rel="stylesheet" />
  18.     <link href="Scripts/demo.css" rel="stylesheet" />
  19.     <link href="Scripts/font-awesome.css" rel="stylesheet" /> 
  20.  
  21.      <script type="text/javascript">
  22.          var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
  23.  
  24.          $(function () {
  25.  
  26.              var $ = jQuery,
  27.              $list = $('#fileList'),
  28.              // 优化retina, 在retina下这个值是2
  29.              ratio = window.devicePixelRatio || ,
  30.  
  31.              // 缩略图大小
  32.  
  33.              thumbnailWidth =  * ratio,
  34.              thumbnailHeight =  * ratio,
  35.  
  36.              // Web Uploader实例
  37.              uploader;
  38.  
  39.              uploader = WebUploader.create({
  40.                  // 选完文件后，是否自动上传。
  41.  
  42.                  auto: false,
  43.                  disableGlobalDnd: true,
  44.                  // swf文件路径
  45.                  swf: applicationPath + 'Script/webuploader/Uploader.swf',
  46.  
  47.                  // 文件接收服务端。
  48.  
  49.                  server: 'UploaderFileByBaidu.ashx',
  50.  
  51.                  // 选择文件的按钮。可选。
  52.                  // 内部根据当前运行是创建，可能是input元素，也可能是flash.
  53.                  pick: '#filePicker',
  54.  
  55.                  //只允许选择图片
  56.                  accept: {
  57.                      title: 'Images',
  58.                      extensions: 'gif,jpg,jpeg,bmp,png',
  59.                      mimeTypes: 'image/*'
  60.  
  61.                  }
  62.  
  63.              });
  64.  
  65.              // 当有文件添加进来的时候
  66.  
  67.              uploader.on('fileQueued', function (file) {
  68.                  var $li = $(                    
  69.  
  70.                          '<div id="' + file.id + '" class="cp_img">' +
  71.                              '<img>' +
  72.                          '<div class="cp_img_jian"></div></div>'                       
  73.  
  74.                          ),
  75.  
  76.                      $img = $li.find('img');
  77.                  // $list为容器jQuery实例
  78.                  $list.append($li);
  79.                  // 创建缩略图
  80.                  // 如果为非图片文件，可以不用调用此方法。
  81.  
  82.                  // thumbnailWidth x thumbnailHeight 为 90x 90
  83.                  uploader.makeThumb(file, function (error, src) {
  84.                      if (error) {
  85.                          $img.replaceWith('<span>不能预览</span>');
  86.                          return;
  87.                      }
  88.  
  89.                      $img.attr('src', src);
  90.                  }, thumbnailWidth, thumbnailHeight);
  91.  
  92.              });
  93.  
  94.              // 文件上传过程中创建进度条实时显示。
  95.              uploader.on('uploadProgress', function (file, percentage) {
  96.  
  97.                  var $li = $('#' + file.id),
  98.                      $percent = $li.find('.progress span');
  99.                  // 避免重复创建，如果不想显示图4那样的进度条，可以使用下面的代码，把现在使用的注释掉。
  100.                /*  if (!$percent.length) {
  101.                      $percent = $('<p class="progress"><span></span></p>')
  102.                              .appendTo($li)
  103.                              .find('span');
  104.  
  105.                  }*/
  106.  
  107.                  if (!$percent.length) {
  108.                      $percent = $('<div class="progress progress-striped active">' +
  109.                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
  110.                        '</div>' +
  111.                      '</div>').appendTo($li).find('.progress-bar');
  112.  
  113.                  }
  114.                  $percent.css('width', percentage *  + '%');
  115.  
  116.              });
  117.  
  118.              // 文件上传成功，给item添加成功class, 用样式标记上传成功。
  119.              uploader.on('uploadSuccess', function (file, response) {
  120.                  $('#' + file.id).addClass('upload-state-done');
  121.  
  122.              });
  123.  
  124.              // 文件上传失败，显示上传出错。
  125.              uploader.on('uploadError', function (file) {
  126.                  var $li = $('#' + file.id),
  127.                      $error = $li.find('div.error');
  128.  
  129.                  // 避免重复创建
  130.                  if (!$error.length) {
  131.                      $error = $('<div class="error"></div>').appendTo($li);
  132.  
  133.                  }
  134.                  $error.text('上传失败');
  135.  
  136.              });
  137.  
  138.              // 完成上传完了，成功或者失败，先删除进度条。
  139.              uploader.on('uploadComplete', function (file) {
  140.                  $('#' + file.id).find('.progress').remove();
  141.  
  142.              });
  143.  
  144.              //所有文件上传完毕
  145.              uploader.on("uploadFinished", function () {
  146.                  //提交表单
  147.  
  148.              });
  149.  
  150.              //开始上传
  151.  
  152.              $("#ctlBtn").click(function () {
  153.                  uploader.upload();
  154.  
  155.              });
  156.  
  157.              //显示删除按钮
  158.              $(".cp_img").live("mouseover", function () {
  159.                  $(this).children(".cp_img_jian").css('display', 'block');
  160.  
  161.              });
  162.  
  163.              //隐藏删除按钮
  164.              $(".cp_img").live("mouseout", function () {
  165.                  $(this).children(".cp_img_jian").css('display', 'none');
  166.  
  167.              });
  168.  
  169.              //执行删除方法，只是从客户端删除
  170.              $list.on("click", ".cp_img_jian", function () {
  171.                  var Id = $(this).parent().attr("id");
  172.                  uploader.removeFile(uploader.getFile(Id, true));
  173.                  $(this).parent().remove();
  174.  
  175.              });
  176.  
  177.          });
  178.  
  179.     </script>
  180.  
  181. </head>
  182.  
  183. <body>
  184.  
  185.     <div class="container">
  186.  
  187.         <div class="row">图片上传示例：</div>
  188.  
  189.          <div class="row">
  190.  
  191.         <div id="file">
  192.  
  193.                  <!--用来存放文件信息-->
  194.  
  195.                 <div id="fileList">                   
  196.  
  197.                 </div>
  198.         </div>
  199.  
  200.              </div>
  201.           <div class="row">
  202.      <div class="cp_img_jia" id="filePicker"></div>
  203.  
  204.     </div>
  205.         <div class="row">  <button id="ctlBtn" class="btn btn-default">开始上传</button></div>
  206.  
  207.     </div>
  208.     <div>
  209.     </div>
  210. </body>
  211. </html>

以上代码最后的显示结果如下图:

图8.

2)后台服务器端代码跟前文(WEB版一次选择多个文件进行批量上传(WebUploader)的解决方案)中的UploaderFileByBaidu.ashx.cs文件的代码一样。

第四步：文件辅助类跟前文(WEB版一次选择多个文件进行批量上传(WebUploader)的解决方案)中代码一样。

第五步，在进行上传之后，文件保存在对应的日期目录下。如下图。

图 9

WEB版一次选择多个图片进行批量上传(WebUploader)的解决方案的更多相关文章

  1. WEB版一次选择多个文件进行批量上传(WebUploader)的解决方案

    本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...

  2. WEB版一次选择多个文件进行批量上传(Plupload)的解决方案

    WEB版一次选择多个文件进行批量上传(Plupload)的解决方案  转载自http://www.cnblogs.com/chillsrc/archive/2013/01/30/2883648.htm ...

  3. WEB版一次选择多个文件进行批量上传(swfupload)的解决方案

    说明:功能完全支持ie和firefox浏览器! 一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传,就算是批量上传,也要把文件一个一个的添加到页面,无法如windo ...

  4. [Plugin] WEB版一次选择多个文件进行批量上传(swfupload)的解决方案

    URL:http://www.cnblogs.com/chillsrc/archive/2010/02/21/1670594.html 说明:功能完全支持ie和firefox浏览器! 一般的WEB方式 ...

  5. 文件/图片，批量上传【神器】--WebUploader

    <system.web> <httpRuntime maxRequestLength="102400" executionTimeout="720&qu ...

  6. Yii 图片FTP批量上传 并生成缩略图

    图片批量上传,前台使用 uploadify.swf,这个就不介绍了.这里使用两个扩展,一个是FTP上传的扩展,还有一个是生成缩略图的扩展地址:http://www.yiiframework.com/e ...

  7. 从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  8. 使用KindEditor富文本编辑器，点击批量上传按钮没有选择图片按钮

    问题:批量上传没有选择图片按钮

  9. 【Web】前端裁剪图片，并上传到服务器（Jcrop+canvas）

    web网站中常常有的功能:上传头像.上传封面等:一般图片都有一定的比例限制,所以需要前端在上传图片时,进行裁剪,并把裁剪后的图片进行上传. 本例采用Jcrop插件实现裁剪效果,canvas裁剪图片,并 ...

随机推荐

  1. 快速搭建Japser Report

    下列步骤是快速搭建一个Jasper Report,开发中遇到的坑会在下一个博客中提及,如有任何问题,欢迎留言评论 第一步,打开Jaspersoft Studio,界面跟eclispse一样 创建项目: ...

  2. 我两年的web开发生涯

    我两年的web开发生涯 与以前的文章分享给大家自己的知识和观点不同,这篇文章更多的是写给自己的总结. 现在是 2017年10月18. 从 2015年9月 开始接触前端开发,至今两年零一个月. 从 20 ...

  3. tensorflow 学习笔记 多层感知机

    # -*- coding: utf-8 -*- """ Created on Thu Mar 9 19:20:51 2017 @author: Jarvis " ...

  4. UTF-8和UTF-8无BOM，一个会导致文件中中文变量无法匹配的bug

    昨晚用dom4j中的selectSingleNode解析xml,匹配节点. 发现匹配不到,但是确实存在该节点 将regex改为regex1后则可以匹配,也就是说文件中的"阿里旺旺" ...

  5. opencv摄像头捕获图像

    #include <iostream> #include <opencv2/opencv.hpp> using namespace cv; using namespace st ...

  6. markdown 字体颜色

     Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.但是它本身是不支持修改字体.字号与颜色等功能的!   CSDN-markd ...

  7. centos7.3搭建lamp实现使用wordpress

    ``` 环境说明: 在同一台主机上实现LAMP(Linux + Apache + MariaDB + PHP) CentOS 7.3.Apache 2.4.6.MariaDB 5.5.52.PHP 5 ...

  8. Dubbo源码学习--服务发布（ServiceBean、ServiceConfig）

    前面讲过Dubbo SPI拓展机制,通过ExtensionLoader实现可插拔加载拓展,本节将接着分析Dubbo的服务发布过程. 以源码中dubbo-demo模块作为切入口一步步走进Dubbo源码. ...

  9. Python入门 - 面向对象

    python很好的支持面向对象编程,本节主讲类的定义,类的构造方法,类的继承与方法重写,类的多继承. 一.类的定义 class Myclass() : def prt(self, str) : pri ...

  10. dataset的使用和图片延时加载的实现

    首先,先介绍一下关于javascript中dataset属性..html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放.下面是元素应用data属性的一个例子:~~~~~~~~ ...