input type="file"文件上传时得到文件的本地路劲
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>上传图片预览示例二</title>
<meta name="author" content="熊仔其人-2017年3月3日" />
<meta name="keywords" content="" />
<meta name="description" content="实际运用多张图片上传和预览，可设置默认图片，且可移除选择" />
<style type="text/css">
.image_container {
display: inline-block;
float: left;
}
#tdRoomPicture a, .image_container a {
text-align: center;
vertical-align: middle;
text-decoration: none;
}
a.addImg {
width: 100px;
height: 100px;
line-height: 100px;
display: inline-block;
font-size: 50px;
background-color: #dae6f3;
}
.image_container a.previewBox {
background-color: #dae6f3;
margin: 0 3px 0 0;
display: none;
/*display: inline-block;*/
}
.image_container .delImg {
position: absolute;
color: #f00;
margin: 0 0 0 84px;
font-size: 16px;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
vertical-align: middle;
background-color: #c3c3c3;
}
.defaultImg {
border: 1px solid #f90303;
}
.defaultImg:before {
content: "默认图片";
float: left;
position: absolute;
color: #f90303;
font-size: 14px;
}
.defaultImg:after {
content: "";
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<form id="Form1" method="post" enctype="multipart/form-data">
<div id="tdRoomPicture">
<!--<div class="image_container" data-picId="1">
<input id="RoomInfo1_RoomPicture1" name="RoomInfo1_RoomPicture1" type="file" accept="image/jpeg,image/png,image/gif" style="display: none;" />
<input id="RoomInfo1_RoomPictureHidDefault1" name="RoomInfo1_RoomPictureHidDefault1" type="hidden" value="0" />
<a href="javascript:;" id="previewBox1" class="previewBox defaultImg">
<div class="delImg">×</div>
<img id="preview1" style="height: 100px; width: 100px; border-width: 0px;" />
</a>
</div>-->
<a href="javascript:;" class="addImg" data-picid="0">+</a>
</div>
</form>
<script type="text/javascript">
$(function () {
var picId = 0;
var pictureUploading = false;
$("#Form1").delegate(".addImg", "click", function () {
if (!!pictureUploading) return;
pictureUploading = true;
picId = parseInt($(this).attr("data-picId"));
picId++;
$(this).attr("data-picId", picId);
$(this).before("<div class=\"image_container\" data-picId=\"" + picId + "\">"
+ "<input id=\"RoomInfo1_RoomPicture" + picId + "\" name=\"RoomInfo1_RoomPicture" + picId + "\" type=\"file\" accept=\"image/jpeg,image/png,image/gif\" style=\"display: none;\" />"
+ "<input id=\"RoomInfo1_RoomPictureHidDefault" + picId + "\" name=\"RoomInfo1_RoomPictureHidDefault" + picId + "\" type=\"hidden\" value=\"0\" />"
+ "<a href=\"javascript:;\" id=\"previewBox" + picId + "\" class=\"previewBox\">"
+ "<div class=\"delImg\">×</div>"
+ "<img id=\"preview" + picId + "\" style=\"height:100px;width:100px;border-width:0px;\" />"
+ "</a>"
+ "</div>");
$("#RoomInfo1_RoomPicture" + picId).change(function () {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
$("#previewBox" + picId).css("display", "inline-block");
var $img = $("#preview" + picId);
//var $img = $("#preview1");
if (fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src', dataURL);
} else {
dataURL = $file.val();
var imgObj = $img; //document.getElementById("preview");
// 两个坑:
// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
if (1 === picId) {
defaultImg(picId, true);
}
pictureUploading = false;
});
$("#RoomInfo1_RoomPicture" + picId).click();
//设置默认图片
$(".previewBox").click(function () {
var _picId = parseInt($(this).parent(".image_container").attr("data-picId"));
$(".image_container").each(function () {
var i = parseInt($(this).attr("data-picId"));
if (i === _picId)
defaultImg(i, true);
else
defaultImg(i, false);
});
});
//删除上传的图片
$(".delImg").click(function () {
var _picId = parseInt($(this).parent().parent(".image_container").attr("data-picId"));
$(".image_container[data-picid='" + _picId + "']").remove();
if ($(".image_container").length > 0 && $(".defaultImg").length < 1) {
$(".image_container").each(function () {
var i = parseInt($(this).attr("data-picId"));
defaultImg(i, true);
return false;
});
}
});
});
function defaultImg(picId, selected) {
if (!picId) return;
if (!!selected) {
$("#RoomInfo1_RoomPictureHidDefault" + picId).val(1);
$("#previewBox" + picId).addClass("defaultImg");
}
else {
$("#RoomInfo1_RoomPictureHidDefault" + picId).val(0);
$("#previewBox" + picId).removeClass("defaultImg");
}
}
});
</script>
</body>
</html>
input type="file"文件上传时得到文件的本地路劲的更多相关文章
- input[type='file']获取上传文件路径案例
最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...
- input type='file'限制上传文件类型
前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so easy啊,没什么嘛 ...
- input type file onchange上传文件的过程中，遇到同一个文件二次上传无效的问题。
不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...
- input type file onchange上传文件的过程中，同一个文件二次上传无效的问题。
不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...
- input type=file 图片上传相关
HTML: <input type="file" name="address" onchange='PreviewImage(this)' value ...
- jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因
今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- spring mvc文件上传(单个文件上传|多个文件上传)
单个文件上传spring mvc 实现文件上传需要引入两个必须的jar包 1.所需jar包: commons-fileupload-1.3.1.jar ...
- 使用PHP实现文件上传和多文件上传
PHP 2013 年 9 月 4 日 暂无评论 在PHP程序开发中,文件上传是一个使用非常普遍的功能,也是PHP程序员的必备技能之一.值得高兴的是,在PHP中实现文件上传功能要比在Java.C#等语言 ...
随机推荐
- Using Dtrace OEL 6.X and Oracle® Solaris 11.3 DTrace (Dynamic Tracing) Guide
http://www.hhutzler.de/blog/using-dtrace/ https://docs.oracle.com/cd/E53394_01/html/E53395/gkyaz.htm ...
- Centos7.3 bbc tools安装
http://blog.csdn.net/orangleliu/article/details/54099528 更新到最新 CentOS 7.3 1611 yum update -y cat /et ...
- MediaInfo用来分析视频和音频文件的编码和内容信息的超好用工具
转载:http://blog.csdn.net/ameyume/article/details/6718705 MediaInfo简介 MediaInfo 用来分析视频和音频文件的编码和内容信息. M ...
- 微信跳一跳 可以直接更改分数， POST 请求没有校验
这两天逛 v 站出现了一众微信跳一跳 'AI',已经被刷屏了…… https://www.v2ex.com/t/418833 https://www.v2ex.com/t/418775 https:/ ...
- http://www.oschina.net/code/snippet_12_13918
http://www.oschina.net/code/snippet_12_13918
- 【前后台分离模式下，使用OAuth Token方式认证】
AngularJS is an awesome javascript framework. With it’s $resource service it is super fast and easy ...
- represent states with objects
1. The behavior of objects in the real world is more complex than simply being in one state at a tim ...
- Gitlab安装部署及基础操作
环境说明 系统版本 CentOS 7.2 x86_64(较新版本的gitlab集成了更多功能,顺利运行起来的硬件要求较高,这里给了3G内存) 软件版本 gitlab-ce-10.8.4 GitLa ...
- Java代码格式
东汉大臣陈蕃有一则这种故事,"一屋不扫何以扫天下",寓意来表明一个大丈夫,假设连自己的居室都不能打扫干净,怎么胸怀天下.<代码整洁之道>就是来劝诫我们程序猿写出更优秀的 ...
- C# 鼠标全局钩子
/// <summary> /// 鼠标全局钩子 /// </summary> public class MouseHook { private const int WM_MO ...