mvc上传图片(上传和预览)webuploader
笔者看到mvc最近比较流行,而很多使用一些比较旧的的方法上传图片,再次安利一下百度的webuploader控件吧
webuploader第一步要先下载一些插件这点可以在webuploader官网上下载。http://fex.baidu.com/webuploader/
开始的时候第一步引用webuploader
需要引用的是一个css文件和一个js文件
接下来就是实例化插件(术语不标准233)和创建马上预览的图片和一个div用来过会添加图片
<tr>
<td>上传图片</td>
<td>
<div id="upl">上传图片</div>//马上这个会用js实例化
<div id="Pic" style="width:100%"></div>//过会这个div会显示我所添加的图片
</td>
</tr>
<tr>
<td></td>
<td>
<div class="modal fade" id="myModalPic" tabindex="-1" role="dialog" aria-labelledby="myModalssLabel" aria-hidden="true">//这里的一大段其实就是我用来做预览图片的忽略即可
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="close" οnclick="$('#myModalPic').modal('hide');">
×
</button>
<h4 class="modal-title" id="myModalssLabel">预览图</h4>
</div>
<img id="imgPicture" />
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</td>
</tr>
这里面的一大段都是我的预览图片是隐藏的东西,由于我这个demo用之前旧的项目改进的所有可能会有些low
接下来展示的是Js里面实例化的代码
var uploader;
var picture = {
picarry: new Array(),
idcarry: new Array()
};
$(function () {
uploader = WebUploader.create({
auto: true,
swf: '/Scripts/Uploader.swf',
server: '@Url.Action("Upload")',//控制器(这里面是添加以后控制器跳转的代码)
pick: '#upl',
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
})
uploader.on("uploadSuccess", function (file, response) {//这里面则是添加图片由于我做的是多图上传所以就直接在css样式add了
$("#Pic").append(
"<table border='0' cellpadding='0' cellspacing='0' style='float: left;margin-left:15px;'>" +
"<tbody><tr><td align='center' valign='middle'>" +
"<img width='200' height='140' id='" + response.id + "' src='" + response.src + "' /> " +
"</td></tr><tr><td> " +
"<input class='btn btn-default' value='预览' type='button' οnclick=\"show('#myModalPic','#imgPicture','" + response.src + "')\" id='" + response.id + "yl' />" +
"<button class='btn btn-default' type='button' style='margin-left:20px;' id='" + response.id + "del' οnclick=\"del('" +" @Url.Action("DeletePic")" + "','" + response.id + "','" + response.src + "')\">删除</button>" +
"</td></tr></tbody></table>"
);
picture.picarry.push(response.src);
picture.idcarry.push(response.id);
});
//});
$('#myModal').on('hide.bs.modal', function () {
//uploader.destroy();
for (var i = 0; i <= picture.idcarry.length; i++) {
reset(picture.idcarry[i]);
}
//picture.picarry.length = 0;
//picture.idcarry.length = 0;
});
});
function show(DiaklogID, ImgID, src) {
$(ImgID).attr('src', src);
$(DialogID).modal('show');
}
function del(DeleteActionName, id, src) {
if (DeleteActionName == "" || DeleteActionName == null) {
reset(id, src);
} else {
$.post(DeleteActionName, { id, src }, function success(data) {
if (data.statu == 200) {
reset(data.id, data.src);
}
else {
alert(data.msg);
}
});
}
}
function reset(id, src) {
$("#" + id + "").remove();
$("#" + id + "yl").remove();
$("#" + id + "del").remove();
if (id != undefined && src != undefined) {
for (var i = 0; i < picture.idcarry.length; i++) {
if (id == picture.idcarry[i]) {
picture.idcarry.splice(i, 1);
}
}
for (var i = 0; i < picture.picarry.length; i++) {
if (src == picture.picarry[i]) {
picture.picarry.splice(i, 1);
}
}
}
//uploader.destroy();
uploader.reset();
}
这里面包含了后期的添加预览和多功能添加我在底下会展示后台的代码
这里面则是控制器里面的代码:
[HttpPost]
public ActionResult upload(HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
{
string folderpath = "/UploadFile/";//上传图片的文件夹
if (!Directory.Exists(folderpath))
{
Directory.CreateDirectory(Server.MapPath(folderpath));
}
string ext1 = Path.GetExtension(file.FileName);
if (ext1 != ".gif" && ext1 != ".jpg" && ext1 != ".jpeg" && ext1 != ".png")
{
return Json(new { statu = 201, msg = "文件格式不正确!" });
}
else
{
string name = DateTime.Now.ToString("yyyyMMddHHmmssff");
string ext = Path.GetExtension(file.FileName);
string downpath = folderpath + name + ext;
string filepath = Server.MapPath(folderpath) + name + ext;
file.SaveAs(filepath);
return Json(new { statu = 200, src = downpath, id = name });
}
}
else
{
return Json(new { statu = 202, msg = "请上传文件!" });
}
}
这里面则是判断上传的东西了由于uploader上传多个图片会上传多次,所以代码也会执行多次,而前台的添加也会执行多次。
项目到这里就差不多了,我将会进行完整版的展示。
这个上传图片就是webuploader
选中3张上传。
可以进行预览删除
转载于:https://www.cnblogs.com/guoke360/p/6085500.html
mvc上传图片(上传和预览)webuploader相关推荐
- ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
- 基于vue element-ui 封装上传图片组件 功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能 例如: 上传图片回显 上传完成 : 预览查看 , 删除等 如果是图片列表,还可能让你拖动图片排序 有的后台项目可能要给图片添加水印,添加标记 有 ...
- html ie8上传图片,图片上传本地预览兼容ie8
工作中遇到的,总结下来了,图片上传本地预览限制图片最大为2M 图片上传本地预览 #preview1{width:260px;height:190px;border:1px solid #000;ove ...
- layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码 上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...
- XX健康:预约管理-套餐管理图片上传与预览Redis实现定时清理垃圾图片
1. 新增套餐 1.1 需求分析 套餐其实就是检查组的集合,例如有一个套餐为"入职体检套餐",这个体检套餐可以包括多个检查组:一般检查.血常规.尿常规.肝功三项等.所以在添加套餐时 ...
- alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- DevExpress控件使用系列--ASPxUploadControl(图片上传及预览)
1.控件功能 列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
- php+jquery实现图片上传预览_和拖动位置值,PHP教程:thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
最新文章
- python if语句能否判断中文,Python之判断语句(if语句)
- mysql Integer Types (Exact Value) - INTEGER, INT, SMALLINT, TINYINT, MEDIUMINT, BIGINT
- led显示屏控制卡接线图解_Led显示屏出现花屏是什么原因
- [转载] python numpy.random.randn()与numpy.random.rand()的区别 (正态分布公式)(标准正态分布 standard normal distribution
- Android进阶:Binder那么弱怎么面大厂?
- BOM对象有哪些,列举window对象?
- Android零基础入门第14节:使用高速Genymotion,跨入火箭时代
- Kylo调研总结(二)
- 为防止程序员猝死,这家公司想出了一个好办法
- python实现B站自动发弹幕_python代码
- 冒险教主-超详细绘制教程
- 小红帽Linux命令安装软件,linux-rpm功能及yum安装命令
- gg修改器偏移量修改_烧饼修改器地址偏移计算器功能使用说明
- 微信分享,缩略图显示不出来
- win10系统全角半角切换
- 调用bing图片html代码,网站背景调用必应Bing每日图片教程附接口
- 打蚊子表情包_蚊子表情包 - 蚊子微信表情包 - 蚊子QQ表情包 - 发表情 fabiaoqing.com...
- viper4android io错误,viper操作文档
- Steam Buff 自动选品 网页版教程
- npi阶段是什么意思_NPI阶段发现重要性论述.doc
热门文章
- TensorFlow VGG16
- Bokeh 风格属性设置
- matplotlib text 文字处理
- lua是编译成c语言再执行嘛,go_lua_c: 使用go编译lua脚本为字节码,通过网络传给c,通过c执行lua脚本。...
- pycharm的项目文件中包括什么_婚庆策划是什么?婚庆策划都包括哪些项目
- Java基础学习总结(137)——Java ClassLoader再总结
- 项目经理如何才能快速成长?
- python自动控制库_python PyAUtoGUI库实现自动化控制鼠标键盘
- oracle 添加归档日志文件_oracle 归档日志文件路径设置
- 途牛 “特产频道”上线 深化目的地服务网络