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#等语言 ...
随机推荐
- Saga alternatives – routing slips
In the last few posts on sagas, we looked at a variety of patterns of modeling long-running business ...
- IP windows相关
nbtstat: 假设 我们 通过net view 获取了 局域网内一些计算机名 如上标红的计算机名称 如何 才能获取计算机的ip呢? 接下来使用 nbtstat -a 列出远程机器的名称表: ...
- PHP addslashes() 函数
定义和用法 addslashes() 函数在指定的预定义字符前添加反斜杠. 这些预定义字符是: 单引号 (') 双引号 (") 反斜杠 (\) NULL 语法 addslashes(stri ...
- 顶点缓存对象（VBO）【转】
http://www.cnblogs.com/hefee/p/3824300.html 顶点缓存对象(VBO) 创建VBO 绘制VBO 更新VBO 实例 GL_ARB_vertex_buffer_ob ...
- mysql 将查询出来的某一字段组合成字符串
select GROUP_CONCAT(id) as ids from yii_role_menu where roleId=1;
- PhantomJS用法示例
收录待用,修改转载已取得腾讯云授权 前言 大家有没有发现之前我们写的爬虫都有一个共性,就是只能爬取单纯的html代码,如果页面是JS渲染的该怎么办呢?如果我们单纯去分析一个个后台的请求,手动去摸索JS ...
- MongoDB集群设置集合分片生效及查看集合分片情况
#连接mongos /opt/mongodb/mongodb-linux-x86_64-2.4.8/bin/mongo 127.0.0.1:27017 #使用admin数据库 use admin ...
- virtualBox安装centos7并配置nginx php mysql运行环境
virtualBox安装centos7并配置nginx php mysql运行环境 一:virtualBox安装centos7并进行基础设置 1.下载dvd.iso安装文件,下载地址:https:// ...
- mycat读写分离与主从切换
1, 分库分表的优缺点.以及为什么分表方式无法成为主流? 分表:在台server上,长处是易维护,相似表分区.缺点是在一台dbserver上.无法分担IO.负载集中. 分库:在多台server上,长处 ...
- iOS 系统框架
iOS的系统架构分为四个层次:核心操作系统层(Core OS layer).核心服务层(Core Services layer).媒体层(Media layer)和可触摸层(Cocoa Touch l ...