批量预览本地图片

转载

mob604756fa96d7 2017-08-16 10:46:00

文章标签 前端 vim html javascript microsoft 文章分类 代码人生

批量预览本地图片_html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>get file input full path</title>
<style>
.case_photo_area_small {
    width: 770px;
        overflow:hidden;
}
.small_photo {

border-top: 2px #BFBFBF solid;

border-right: 2px #BFBFBF solid;

border-left: 2px #BFBFBF solid;

border-bottom: 2px #BFBFBF solid;
}
.small_photo_selected {

border-top: 2px #FFCC00 solid;

border-right: 2px #FFCC00 solid;

border-left: 2px #FFCC00 solid;

border-bottom: 2px #FFCC00 solid;
}
</style>
<script type="text/javascript" language="javascript"

src="native_picture.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody id="_container">
<tr>
<td><input type="file" id="FileUpload1" name="FileUploads"

onchange="getFullPath(this,'FileUpload1',true);" /> <a
href="javascript:void(0);" onclick="addFile()">添加</a></td>
</tr>
</tbody>
</table>
<table border=0 cellspacing=0 cellpadding=0 style="display: none;"

id="tableImg">
<tr>
<td><img id="beforeX" src="images/left.png"></td>
<td>
<div class="case_photo_area_small" id="showareX">
<table border=0 cellspacing="1px" cellpadding=0>
<tr id="_newPreview"></tr>
</table>
</div>
</td>
<td><img id="nextX" src="images/right.png"></td>
<td><a href="javascript:void(0);" id="deleThisImg">【删除图片】 </a></td>
</tr>
</table>
</body>
</html>

批量预览本地图片_javascript_02

`//native_picture.js` `var` `id = 0;` `function` `addFile() {` `var` `tab = document.getElementById(``"_container"``);` `var` `row = document.createElement(``"tr"``);` `var` `cell = document.createElement(``"td"``);` `var` `f = document.createElement(``"input"``);` `f.setAttribute(``"type"``,` `"file"``);` `f.setAttribute(``"id"``,` `"FileUpload"` `+ (id + 2));` `f.setAttribute(``"name"``,` `"FileUploads"``);` `f.setAttribute(``"contentEditable"``,` `false``);` `cell.appendChild(f);` `var` `btndele = document.createElement(``"a"``);` `btndele.setAttribute(``"href"``,` `"javascript:void(0)"``);` `btndele.setAttribute(``"class"``,` `"btn2"``);` `btndele.innerHTML =` `"<span class='toolbar_icon toolbar_icon_07'></span>删除"``;` `btndele.setAttribute(``"value"``,` `"删除"``);` `btndele.setAttribute(``"Id"``,` `"del"` `+ id);` `btndele.onclick =` `function``() {` `// 删除行` `getFullPath(``this``.parentNode.childNodes[0],` `this``.parentNode.childNodes[0].getAttribute(``"id"``),` `false``);` `while` `(``true``) {` `if` `(btndele.tagName ==` `"TD"``) {` `break``;` `}` `else` `{` `btndele = btndele.parentNode;` `btndele.parentNode.removeChild(btndele);` `}` `}` `};` `f.onchange =` `function``() {` `getFullPath(``this``,` `this``.getAttribute(``"id"``),` `true``);` `};` `cell.appendChild(btndele);` `row.appendChild(cell);` `tab.appendChild(row);` `id++;` `}` `var` `goIndex = 0;` `var` `countx = 0;` `function` `getFullPath(obj, fileId, falg) {` `//obj：file对象;fileId："FileUpload"+id; falg:ture 添加或更新图片，false 删除图片` `var` `gindex = fileId.substring(10);` `//取得与file之对应图片id号` `var` `divImg = document.getElementById(``"divImg"` `+ gindex);` `// 判断是否含有此id图片` `var` `newPreview = document.getElementById(``"_newPreview"``);` `//指定TR添加节点` `var` `newPreviewSize = newPreview.childNodes.length;` `//TR已添加TD数` `var` `index =0;` `//获得图片索引` `if``(newPreviewSize>0){` `index=getIndex();` `}` `var` `patn = /.jpg$\|.jpeg$\|.bmp$/i;` `//正则表达式判断上传文件` `countx = newPreviewSize;` `if` `(patn.test(obj.value)) {` `if` `(falg && divImg ==` `null``) {` `var` `cell = document.createElement(``"td"``);` `var` `g = document.createElement(``"div"``);` `g.setAttribute(``"id"``,` `"divImg"` `+ gindex);` `g.style.width =` `"90px"``;` `g.style.height =` `"90px"``;` `//指定位置添加图片` `if` `(!newPreview.hasChildNodes()\|\|newPreviewSize==index) {` `cell.appendChild(g);` `newPreview.appendChild(cell);` `goIndex=newPreviewSize-1;` `}` `else` `{` `cell.appendChild(g);` `newPreview.insertBefore(cell, newPreview.childNodes[index]);` `goIndex=index-1;` `}` `iephoto(g);` `countx++;` `nextX();` `}` `else` `if` `(falg) {` `iephoto(divImg);` `if``(newPreviewSize==1){` `goIndex=0;` `}``else``{` `goIndex=index+1;` `}` `beforeX();` `}` `else` `{` `delephoto();` `}` `}` `else` `if` `(divImg !=` `null``) {` `delephoto();` `}``else``{` `return` `false``;` `}` `styleDivImg();` `showhidden();` `document.getElementById(``"beforeX"``).onclick=``function``(){` `beforeX();` `styleDivImg();` `};` `document.getElementById(``"nextX"``).onclick=``function``(){` `nextX();` `styleDivImg();` `};` `// 删除选中的图片` `document.getElementById(``"deleThisImg"``).onclick=``function``(){` `var` `imgNow =newPreview.childNodes[goIndex].getElementsByTagName(``"div"``)[0];` `var` `buttonIndex=parseInt(imgNow.getAttribute(``"id"``).substring(6));` `var` `buttonNow =document.getElementById(``"FileUpload"``+buttonIndex);` `if``(imgNow&&buttonNow){` `imgNow.parentNode.parentNode.removeChild(imgNow.parentNode);` `//删除button,若为第一个就清空值` `if``(buttonIndex==1){` `//buttonNow.select();` `//document.execCommand("delete");` `buttonNow.outerHTML=buttonNow.outerHTML;` `}``else``{` `while` `(``true``) {` `if` `(buttonNow.tagName ==` `"TD"``) {` `break``;` `}` `else` `{` `buttonNow =buttonNow.parentNode;` `buttonNow.parentNode.removeChild(buttonNow);` `}` `}` `}` `countx--;` `beforeX();` `styleDivImg();` `showhidden();` `}` `};` `//图片样式` `function` `styleDivImg(){` `for``(``var` `j=0;j<countx;j++){` `if``(j==goIndex)` `newPreview.childNodes[j].className=``"small_photo_selected"``;` `else` `newPreview.childNodes[j].className=``"small_photo"``;` `}` `}` `//IE浏览器浏览本地DIV图片路径` `function` `iephoto(ie){` `obj.select();` `ie.style.filter =` `"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"``;` `ie.filters.item(``"DXImageTransform.Microsoft.AlphaImageLoader"``).src = document.selection.createRange().text;` `}` `//删除图片` `function` `delephoto(){` `if``(newPreviewSize==1){` `goIndex=1;` `}``else``{` `goIndex= index;` `}` `countx--;` `divImg.parentNode.parentNode.removeChild(divImg.parentNode);` `beforeX();` `}` `//获取索引` `function` `getIndex(){` `var` `arr =` `new` `Array();` `var` `indexg =0;` `// document.getElementById("divImg" + jj);` `for` `(``var` `jj = 0; jj < newPreviewSize; jj++) {` `var` `gchild = newPreview.childNodes[jj].getElementsByTagName(``"div"``)[0];` `arr[jj] = parseInt(gchild.getAttribute(``"id"``).substring(6));` `}` `if``(divImg==``null``&&falg){` `arr[newPreviewSize] = gindex;` `}` `//对数字排序` `function` `sortNumber(a,b)` `{` `return` `a - b;` `}` `arr = arr.sort(sortNumber);` `for``(``var` `jj=0;jj<arr.length;jj++){` `if``(arr[jj]==gindex){` `indexg=jj;` `break``;` `}` `}` `return` `indexg;` `}` `}` `//显示隐藏` `function` `showhidden(){` `var` `tableImg = document.getElementById(``"tableImg"``);` `if``(countx==0){` `tableImg.style.display=``"none"``;` `}``else``{` `tableImg.style.display=``"block"``;` `}` `}` `//上一个` `function` `beforeX() {` `if` `(goIndex <= 0) {` `goIndex = countx-1;` `}` `else` `{` `goIndex--;` `}` `document.getElementById(``"showareX"``).scrollLeft = (93) * goIndex;` `}` `//下一个` `function` `nextX() {` `if` `(goIndex+1>=countx) {` `goIndex = 0;` `}` `else` `{` `goIndex++;` `}` `document.getElementById(``"showareX"``).scrollLeft = (93) * goIndex;` `}`