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#等语言 ...
随机推荐
- 学习Microsoft SQL Server 2008技术内幕：T-SQL语法基础--第4章
第4章 子查询 4.2.1 Exist 谓语: use TSQLFundamentals2008 select * from Sales.Customers as C where c.country= ...
- Git学习笔记(二) 远程仓库及分支
添加远程仓库(以GitHub为例) 所谓的远程仓库,其实就和本地仓库一样,只是我们本地电脑可能会关机什么的.远程仓库的目的就是保证7*24小时开启状态.GitHub是一个很好的公共Git远程仓库(后面 ...
- SQLServer组成：
SQL Server DB Engine (Relational Engine),SQL语言用于向Engine描述问题. Algebrizer:代数器,检查语法,并将查询转换成内部表达式 Query ...
- Debian6 安装Kscope（也适用于Ubuntu）
参考:http://soft.chinabyte.com/os/134/12307634.shtml kscope1.6.2在这里下载,下载后解压出kscope-1.6.2.tar.gz. 在ubun ...
- Telnet窗口尺寸选项
转:http://www.cnpaf.net/Class/Telnet/200408/6.html 1．命令名称和选项代码 名称=NAWS(NegotiateAboutWindowSize)协商窗口的 ...
- Swift，下标简化方法的调用
在类(class)当中采用subscript的方法直接用下标 class a{ func b(number:Int)->Int{ return number } subscript(number ...
- D3.js系列——布局：饼状图和力导向图
一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...
- http://blog.csdn.net/huang_xw/article/details/7090173
http://blog.csdn.net/huang_xw/article/details/7090173
- [Node.js] Show More Lines in a Node.js Error Stack Trace
Sometimes you are one or two lines short from finding the cause of the error in the stack trace but ...
- Flume入门样例
Flume 作为 cloudera 开发的实时日志收集系统,受到了业界的认可与广泛应用.Flume 初始的发行版本目前被统称为 Flume OG(original generation),属于 clo ...