Asp.net MVC使用swupload实现多图片上传功能

本文实例为大家分享了swupload实现多图片上传的具体代码,供大家参考,具体内容如下

1. 下载WebUploader

2. 将下载到的压缩包里面的文件复制到自己的项目中

3. 添加引用

<!--引入Jquery-->
<script src="~/Script/jquery-1.8.2.min.js"></script>
<!--引入Css-->
<link href="~/CSS/webuploader.css" rel="stylesheet" />
<!--引入Js-->
<script src="~/Script/webuploader.js"></script>

4.准备一个放图片的容器和一个上传按钮

<div id="fileList"></div> <!--这是存放图片的容器-->
<div class="cp_img_jia" id="filePicker"></div> <!--这是上传按钮-->

5.创建Web Uploader实例并监听事件

<script type="text/javascript">

 var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
 $(function () {
  var $ = jQuery,
  $list = $('#fileList'),
  // 优化retina, 在retina下这个值是2
  ratio = window.devicePixelRatio || 1,
  // 缩略图大小
  thumbnailWidth = 90 * ratio,
  thumbnailHeight = 90 * ratio,
  // Web Uploader实例
  uploader;
  uploader = WebUploader.create({
   // 选完文件后,是否自动上传。
   auto: false,

   // swf文件路径
   swf: applicationPath + '/Script/Uploader.swf',

   // 文件接收服务端。
   server: applicationPath + '/Home/UpLoadProcess',

   // 选择文件的按钮。可选。
   // 内部根据当前运行是创建,可能是input元素,也可能是flash.
   pick: '#filePicker',

   //只允许选择图片
   accept: {
    title: 'Images',
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimeTypes: 'image/*'
   }
  });

  // 当有文件添加进来的时候
  uploader.on('fileQueued', function (file) {
   var $li = $(
     '<div id="' + file.id + '" class="cp_img">' +
      '<img>' +
     '<div class="cp_img_jian"></div></div>'
     ),
    $img = $li.find('img');

   // $list为容器jQuery实例
   $list.append($li);

   // 创建缩略图
   // 如果为非图片文件,可以不用调用此方法。
   // thumbnailWidth x thumbnailHeight 为 100 x 100
   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 = $('#' + 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, response) {

   $('#' + file.id).addClass('upload-state-done');
  });

  // 文件上传失败,显示上传出错。
  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('上传失败');
  });

  // 完成上传完了,成功或者失败,先删除进度条。
  uploader.on('uploadComplete', function (file) {
   $('#' + file.id).find('.progress').remove();
  });

  //所有文件上传完毕
  uploader.on("uploadFinished", function ()
  {
   //提交表单

  });

  //开始上传
  $("#ctlBtn").click(function () {
   uploader.upload();

  });

  //显示删除按钮
  $(".cp_img").live("mouseover", function ()
  {
   $(this).children(".cp_img_jian").css('display', 'block');

  });
  //隐藏删除按钮
  $(".cp_img").live("mouseout", function () {
   $(this).children(".cp_img_jian").css('display', 'none');

  });
  //执行删除方法
  $list.on("click", ".cp_img_jian", function ()
  {
   var Id = $(this).parent().attr("id");
   uploader.removeFile(uploader.getFile(Id,true));
   $(this).parent().remove();
  });

 });

</script>

6 在Controller里新建一个Action用于保存图片并返回图片路径(这方法是 eflay 前辈博客上说的)

public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
  {
   string filePathName = string.Empty;

   string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload");
   if (Request.Files.Count == 0)
   {
    return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" });
   }

   string ex = Path.GetExtension(file.FileName);
   filePathName = Guid.NewGuid().ToString("N") + ex;
   if (!System.IO.Directory.Exists(localPath))
   {
    System.IO.Directory.CreateDirectory(localPath);
   }
   file.SaveAs(Path.Combine(localPath, filePathName));

   return Json(new
   {
    jsonrpc = "2.0",
    id = id,
    filePath = "/Upload/" + filePathName
   });

  }

这样就大功告成了。

由于是第一次写博客,里面如果有写的不详细或不对的地方,欢迎大家指点。希望能和大家一起进步。

源码下载:swupload实现多图片上传

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Asp.net MVC使用swupload实现多图片上传功能

    本文实例为大家分享了swupload实现多图片上传的具体代码,供大家参考,具体内容如下 1. 下载WebUploader 2. 将下载到的压缩包里面的文件复制到自己的项目中 3. 添加引用 <!--引入Jquery--> <script src="~/Script/jquery-1.8.2.min.js"></script> <!--引入Css--> <link href="~/CSS/webuploader.css&qu

  • 微信小程序基于腾讯云对象存储的图片上传功能

    在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于

  • java使用CKEditor实现图片上传功能

    java如何使用CKEditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的CKEditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预览框中文本内容,并修改hidden属性值为显示上传选项卡 删除image.js中包含在双引号中的上述文本 将image.js中的hidden属性值改为0 3.修改ckeditor/config.js文件,配置"上传到服务器"按钮调用的controller接口 4."上传到服务器&

  • iOS实现压缩图片上传功能

    本文实例为大家分享了iOS实现压缩图片上传功能,供大家参考,具体内容如下 #pragma mark - 打开相机 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{ UIImage *image = info[UIImagePickerControllerOriginalImage]; s

  • 使用express+multer实现node中的图片上传功能

    下文给大家介绍使用express+multer实现node中的图片上传功能,具体内容介绍如下所示: 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在node中使用multer中间件来对上传路由接口进行处理 multer文档 package.json html部分 <body> <div class="form-group"> <label>File input

  • vue中利用simplemde实现markdown编辑器(增加图片上传功能)

    前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

  • Vue2.0 实现移动端图片上传功能

    本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple

  • 详解vue 图片上传功能

    这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'> <img :src="item"> </li> <li style="position:relative

  • asp.net core集成kindeditor实现图片上传功能

    本文为大家分享了asp.net core 如何集成kindeditor并实现图片上传功能的具体方法,供大家参考,具体内容如下 准备工作 1.visual studio 2015 update3开发环境 2.net core 1.0.1 及以上版本 目录 新建asp.net core web项目 下载kindeditor 增加图片上传控制器 配置kindeditor参数 代码下载 新建asp.net core web项目 新建一个asp.net core项目,这里命名为kindeditor 选中w

  • CKEditor与dotnetcore实现图片上传功能

    本文实例为大家分享了CKEditor与dotnetcore实现图片上传的具体代码,供大家参考,具体内容如下 CKEditor的使用 1.引入js库 <script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js"></script> 2.定义一个textarea标签 <textarea id="editor"> </textarea> 3.用Ck

随机推荐