前端组件webuploader
当时也是搞了很久参考这种demo，但是没记、现在事后大致总结下。直接上大概代码（我使用asp.net MVC来做的）：
执行顺序：（get）Record/Add——Add.cshtml页面，点击确认上传执行上传图片，可多选——（post）Photo/UploadPhotos，完成图片上传。多图分别执行post接口上传、1张图失败可能不会有提示；返回图片url保存在页面的隐藏字段内——（post）Record/Add保存整个实体信息，图片url解析(用|或;)保存
public ActionResult Add()
{
return View();
} [HttpPost]
public JsonResult Add(string key1, string key2, string photoUrlSplits, int typeId = , string remark = "")
{
if (key1.IsNullOrWhiteSpace() || photoUrlSplits.IsNullOrWhiteSpace() || photoUrlSplits.Length < )
return Json(new BaseResponse(ApiCodeEnum.ParamError.GetHashCode(), "参数错误")); var photoUrls = photoUrlSplits.Trim(';').Split(';').ToList();
_service.SaveRecord(CurrentUser, key1, key2, photoUrls, typeId, remark);
return Json(new BaseResponse());
}
public class PhotoController : BaseControllerWithUser
{
private readonly PhotoService _service = new PhotoService(); static string urlPath = string.Empty; public PhotoController()
{
var applicationPath = VirtualPathUtility.ToAbsolute("~") == "/" ? "" : VirtualPathUtility.ToAbsolute("~");
urlPath = applicationPath + "/Upload";
} public JsonResult UploadPhotos(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 == )
{
return Json(new { jsonrpc = 2.0, error = new { code = , 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 = urlPath + "/" + filePathName
}); //_service.UploadPhotos();
//return Json("");
} }
前端页面代码：
@using OuymxPhotoRecordSystem.Web.Service
@{
Layout = null;
} <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>上传图片数据</title>
@*<script src="../../js/plugins/jQuery/jquery-2.2.3.min.js"></script>*@
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<link href="/CSS/webuploader.css" rel="stylesheet" />
<script src="/Scripts/webuploader.js"></script>
<link href="/CSS/bootstrap.min.css" rel="stylesheet" />
<link href="/CSS/style.css" rel="stylesheet" />
<link href="/CSS/demo.css" rel="stylesheet" />
<link href="/CSS/font-awesome.css" rel="stylesheet" /> <script src="/js/plugins/layer/layer.js"></script>
</head>
<body>
@using (Html.BeginForm("Add", "Record", FormMethod.Post))
{
<table class="tc_table_cp" border="">
<tr>
<td width="">图片上传</td>
<td colspan="">
<div id="fileList"> </div>
<div class="cp_img_jia" id="filePicker"></div>
<input id="photoUrlSplits" name="photoUrlSplits" type="hidden" value="" />
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</td>
</tr>
@*空的行，主要为了显示上传失败的文字提醒*@
<tr>
<td width=""></td>
<td colspan="">
</td>
</tr>
@*上传按钮和隐藏控件移到前面去了*@
@*<tr>
<td width=""></td>
<td colspan="">
<input id="photoUrlSplits" name="photoUrlSplits" type="hidden" value="" />
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</td>
</tr>*@
<tr>
<td>主键1</td>
<td>@Html.TextBox("key1")</td>
</tr>
<tr>
<td>主键2</td>
<td>@Html.TextBox("key2")</td>
</tr>
<tr>
<td>类型</td>
<td>@Html.DropDownList("typeId", WebMvcHelper.GetPhotoTypes())</td>
</tr>
<tr>
<td>备注</td>
<td>@Html.TextBox("remark")</td>
</tr>
<tr>
<td></td>
<td>
<input id="btnSubmit" type="submit" style="width: 120px;" value="提交保存" disabled="disabled" title="先上传图片后才能提交保存"/>
</td>
</tr>
</table>
}
</body>
</html> <script type="text/javascript"> $("#btnSubmit").click(function (event) {
event.preventDefault(); var photoUrlSplits = $('#photoUrlSplits').val();
var key1 = $('#key1').val();
if (photoUrlSplits == null || photoUrlSplits.length <= || key1 == null || key1 == '') {
layer.msg('保存失败，原因：主键不得为空，待上传图片不得为空', { icon: , time: , closeBtn: }, function () {
//no-op
});
return;
}
$.ajax({
type: 'POST',
url: '@Url.Action("Add")',
data: { 'photoUrlSplits': photoUrlSplits, 'key1': key1, 'key2': $('#key2').val(), 'typeId': $("#typeId").val(), 'remark': $('#remark').val(), },
success: function (data) {
if (data.code == ) {
layer.msg('保存成功', { icon: , time: }, function () {
parent.layer.closeAll(); //成功则关闭自身layer
//window.parent.location.reload(); //无需执行，因为Index父页面已定义关闭本layer时自动执行
});
}
else {
layer.msg('保存失败，原因：' + data.message, { icon: , time: , closeBtn: }, function () {
//no-op
});
}
},
dataType: 'json'
});
}); var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
$(function () {
var $ = jQuery,
$list = $('#fileList'),
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || ,
// 缩略图大小
thumbnailWidth = * ratio,
thumbnailHeight = * ratio,
// Web Uploader实例
uploader;
uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: false,
disableGlobalDnd: true,
// swf文件路径
swf: applicationPath + '/Script/Uploader.swf',
// 文件接收服务端。
server: applicationPath + '/Photo/UploadPhotos',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
//只允许选择图片
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png,image/bmp'
}
}); // 当有文件添加进来的时候
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 * + '%');
}); // 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file, response) {
$('#' + file.id).addClass('upload-state-done');
$("#photoUrlSplits").val($("#photoUrlSplits").val() + response.filePath + ";");//"/Upload/9bd17b72a61043cf857fb112df3c3cf1.png"
//alert("uploadSuccess");
}); // 文件上传失败，显示上传出错。
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();
//alert("uploadComplete");
}); //所有文件上传完毕
uploader.on("uploadFinished", function ()
{
//提交表单
//alert("uploadFinished"); if ($("div.error").length > ) {
$("#btnSubmit").attr("disabled");
//alert("部分文件上传失败，可能是文件过大或文件格式不正确。请排查或咨询管理员！");
layer.msg("部分文件上传失败，可能是文件过大或文件格式不正确。请排查或咨询管理员！", { icon: , time: , closeBtn: });
}
else {
$("#btnSubmit").removeAttr("disabled");
//alert("所有文件上传完毕，请检查是否有错误，若全部正确请提交"); layer.msg("所有文件上传完毕，请检查是否有错误，若全部正确请提交！", { icon: , time: , closeBtn: });
}
}); //开始上传
$("#ctlBtn").click(function () {
uploader.upload(); event.preventDefault();
});
//以下方法原计划实现：鼠标移上去显示删除按钮，移出则不显示。原demo的live代码可实现、但live在jq1.9已被删除、新的on()做不到对未来元素、指定某未来元素的控制。而本AdminLTEd需要需要jq2.2
//
//1.
//$(document).on("mouseover", ".cp_img_jian", function () {
// //此处的$(this)指$( "#testDiv")，而非$(document)
// $(this).show();
//}); //2.
//$(document).on("mouseout", ".cp_img_jian", function () {
// //此处的$(this)指$( "#testDiv")，而非$(document)
// $(this).hide();
//}); //3.
//$('#fileList').on('mouseover', function (e) {
// $('.cp_img_jian').show();
//});
//$('#fileList').on('mouseout', function (e) {
// $('.cp_img_jian').hide();
//}); //4.
//$(".cp_img").mouseover(function () {
// alert("mouseover");
//});
//$(".cp_img").mouseout(function () {
// alert("mouseout");
//}); //5.
//显示删除按钮
$(".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>
效果图：
不足（都不是大问题）：
1.图片是单个单个上传的、没有分片，可能会速度慢
2.单个图片失败可能会没有提示
3.仅在点击“上传图片”后可定点删除图片，不能在点击“上传图片”前删除。不过这个不是重点问题不大
图片上传组件webuploader的更多相关文章
-
Jquery图片上传组件，支持多文件上传
Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...
-
vue图片上传组件
前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造*,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...
-
H5拍照、选择图片上传组件核心
背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
-
微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
-
百度上传组件 WebUploader
WebUploader http://fex.baidu.com/webuploader/doc/index.html WebUploader API 文档详细解读 源码以及示例:https://gi ...
-
vux-uploader 图片上传组件
1.网址:https://github.com/greedying/vux-uploader 2.安装 npm install vux-uploader --save npm install --sa ...
-
百度开源上传组件WebUploader的formData动态传值技巧
基于Web页面的文件上传一直是互联网应用开发中避免不了的,从asp时代的AspUpload组件.到asp无组件上传,到.Net时代的FileUpload,再到HTML5时代的各种基于jQuery的上传 ...
-
【antd Vue】封装upload图片上传组件（返回Base64）
最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...
-
分享百度文件上传组件webUploader的使用demo
先创建DOM节点:<head ng-app="myApp"> <meta charset="UTF-8"> <title>& ...
随机推荐
-
docker版wordpress
拉取wordpress镜像 docker pull wordpress:latest 创建mysql 容器docker run --name wordpress-mysql -e MYSQL_ROOT ...
-
【NodeJS】环境变量配置
安装完Node后,NodeJS自带npm.于是我照着网上的教程想搭一个脚手架.结果报错: ’node’ 不是内部或外部命令,也不是可运行的程序 但是我检查了一下系统环境变量,path底下有正确引用no ...
-
CentOS源 Ubuntu 源 OpenSUSE-----持续汇总
CentOS 基础(常用)的源:http://dl.fedoraproject.org/pub/epel/epel-release-latest-5.noarch.rpmhttp://dl.fedor ...
-
当WEB站点应用程序池标识为ApplicationPoolIdentity，出现运行错误时的解决方法
对于数据库文件加Authenticated Users用户,并授予完全权限.
-
Stopwatch 类【转】
一般我们想要测试使用那种方法或着那种类型效率更高,使用Stopwatch类进行测试就可以,我也是现在才知道,汗一个. 先来看个小示例,如下. 前提,先引用using System.Diagnostic ...
-
在vmware里面免费安装纯净的xp虚拟机
1. 安装vmware, 略 2. 下载xp http://msdn.itellyou.cn/ 用迅雷下载Windows XP Professional with Service Pack 3 (x8 ...
-
tshark命令行的使用（转）
tshark是wireshark的一个命令行工具用于抓包分析: 主要参数如下: 1. 抓包接口类 -i 设置抓包的网络接口,不设置则默认为第一个非自环接口. -D 列出当前存在的网络接口.在不了解OS ...
-
C#中List的方法RemoveAt小测试
结论:在C#中将一个List中的项插入到别一个List中,会复制,而不是从源List中移除. 示例如下 void Start () { TestList (); } void TestList () ...
-
20181105 Timer(慕课网)
定时任务调度 基于给定的时间点,给定的时间间隔或者给定的执行次数自动执行的任务 Java中的定时调度工具 Timer JDK提供,不许引入 功能简单,能用Timer尽量用 Quartz 需要引入 功能 ...
-
基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之Shader准备（7）
Cocos2d-x底层图形绘制是使用OpenGL ES协议的.OpenGL ES是什么呢? OpenGL ES(OpenGl for Embedded System)是OpenGL三维图形API的子集 ...