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#等语言 ...
随机推荐
- 求同余方程x^A=B(mod m)的解个数(原根与指标)
求方程:的解个数 分析:设,那么上述方程解的个数就与同余方程组:的解等价. 设同于方程的解分别是:,那么原方程的解的个数就是 所以现在的关键问题是求方程:的解个数. 这个方程我们需要分3类讨论: 第一 ...
- mac上虚拟机：VMWare Fusion, VirtualBox, Parallels Desktop, CrossOver, Veertu
作者:Louis Tong链接:https://www.zhihu.com/question/35731328/answer/66127970来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...
- js调试方法
参考:1.https://developers.google.com/web/tools/chrome-devtools/javascript/ 2.https://developers.google ...
- Linux程序编译链接动态库版本号的问题
不同版本号的动态库可能会不兼容,假设程序在编译时指定动态库是某个低版本号.执行是用的一个高版本号,可能会导致无法执行. Linux上对动态库的命名採用libxxx.so.a.b.c的格式.当中a代表大 ...
- vim删除文本文件中末行^M
^M字符的来历和作用:在DOS/Windows里,文本文件的换行符为\r\n,而在*nix系统里则为\n,所以DOS/Windows里编辑过的文本文件到了*nix里,每一行都多了个^M.所以^M只是一 ...
- builder pattern
design patterns 结合书本和这个网站的这个系列的文章来看: https://www.tutorialspoint.com/design_pattern/builder_pattern.h ...
- Gitlab备份、迁移、恢复和升级
Gitlab备份.迁移.恢复和升级 自建的Gitlab服务器常常会因为使用时间的增长,其空间容量等硬件需求都需要升级,或者迁移至更高配置的服务器上.备份.迁移.恢复.升级过程如下 1.gitlab备份 ...
- ./test.sh . ./test.sh source ./test.sh的区别
背景 今天写几个shell脚本,使用一个公共的config.sh,但是export出来的东西在另外的*.sh中不能直接用,这让我很惆怅,印象中就是可以export出来给别的shell用啊,只要不是下一 ...
- 传统项目目录结构下maven+junit+junitReport
<build> <defaultGoal>compile</defaultGoal> <sourceDirectory>${basedir}/src&l ...
- 倍福TwinCAT(贝福Beckhoff)应用教程12.3 TwinCAT控制松下伺服 NC进阶
在前面一节,我们简单介绍了通过PLC+HMI实现完整控制松下伺服的上使能-运动,采集位置,速度等功能,这里我们会大量简化用到的贝福功能块(为了更加实用).首先依然是对单个轴的封装,我们之前的做法,例如 ...