<!DOCTYPE html>

input标签管理多文本上传,input标签文件上传

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width,
initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,
minimal-ui”>

<meta name=”apple-mobile-web-app-capable” content=”yes”>

<meta name=”apple-mobile-web-app-status-bar-style”
content=”black”>

<meta name=”format-detection” content=”telephone=no”>

<title>多个文件上传</title>

</head>

 

<body>

<div style=”height: 100px;
width: 100px; border: 1px solid
red; position: relative;”>

点击上传

<input onchange=”uploadFile()” id=”upload” multiple=”multiple” type=”file”
accept=”image/*;capture=camera” style=”height: 100px;width: 100px;opacity: 0;position: absolute;top: 0;left: 0;”
/>

</div>

 

<script>

function uploadFile()
{

var input = document.getElementById('upload');

  var files =
Array.prototype.slice.call(input.files);

 
files.forEach(function(file, i)
{

      var reader = new FileReader();

   
reader.onloadend = function(e)
{

    var baseFileStr = this.result.substring((13 + file.type.length),this.result.length);

    console.info(“输出文件数量”);

    console.info(baseFileStr);

   
}

   
reader.readAsDataURL(file);

 
});

}

</script>

 

</body>

</html>

 

 

>>>输出文件数量

>>>iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAYAAAAi2…

!DOCTYPE html html head meta charset = “UTF-8″ meta name =”viewport”
content =”width=device-width, initial-scale=1, maxim…

金沙注册送58 ,Jquery方法一:

<!DOCTYPE html>

<html>

<!DOCTYPE html>

<html>

<head>

<html>

<head>

<meta charset=”UTF-8″>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width,
initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,
minimal-ui”>

    <title></title>

<title>图片预览</title>

<meta name=”apple-mobile-web-app-capable” content=”yes”>

    <script type=”text/javascript” src=”jquery.js”></script>

<style>

<meta name=”apple-mobile-web-app-status-bar-style”
content=”black”>

</head>

* {

<meta name=”format-detection” content=”telephone=no”>

<body>

margin: 0;

<title>多个公文上传</title>

    <input type=’file’ id=’file’/>

padding: 0;

</head>

    <div style=”width:100px;height:100px;border:1px solid red” id=”img”></div>

}

 

</body>

 

<body>

<script>

.picture {

<div style=”height: 100px;
width: 100px; border: 1px solid
red; position: relative;”>

    $(function(){

HTML五图形预览,落成图片预览。margin: 20px;

点击上传

       $(“#file”).change(function(e){

position: relative;

<input onchange=”uploadFile()” id=”upload” multiple=”multiple” type=”file”
accept=”image/*;capture=camera” style=”height: 100px;width: 100px;opacity: 0;position: absolute;top: 0;left: 0;”
/>

             // var file = e.target.files||e.dataTransfer.files;

}

</div>

var file = this.files[0];

 

 

             if(file){

#show {

<script>

                 var reader = new FileReader();

position: absolute;

function uploadFile()
{

                 reader.readAsDataURL(file);

top: 0;

var input = document.getElementById('upload');

                 reader.onload=function(){

left: 0;

  var files =
Array.prototype.slice.call(input.files);

                        $(“<img src='”+this.result+”‘/>”).appendTo(“#img”);

width: 98px;

 
files.forEach(function(file, i)
{

 

height: 98px;

      var reader = new FileReader();

                 }

border: 1px solid #e8e8e8;

   
reader.onloadend = function(e)
{

 

background: #fff;

    var baseFileStr = this.result.substring((13 + file.type.length),this.result.length);

                // reader.readAsDataURL(file);

opacity: .5;

    console.info(“输出文件数量”);

            }

}

    console.info(baseFileStr);

      });

 

   
}

   })

.wrap {

   
reader.readAsDataURL(file);

 

width: 198px;

 
});

 </script>

height: 198px;

}

</html>

border: 1PX solid #e8e8e8;

</script>

 

margin-bottom: 10px;

 

 

}

</body>

JS方法二:

 

</html>

Js 方法:

.wrap img {

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>

width: 100%;

 

<html xmlns=””>

height: 100%;

>>>输出文件数量

<head>

}

>>>iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAYAAAAi2…

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

 

<title>By:DragonDean</title>

.subWrap {

<script type=”text/javascript”>

width: 298px;

//下边用于图片上传预览效用

height: 298px;

function setImagePreview(avalue) {

overflow: hidden;

    var docObj=document.getElementById(“doc”);

position: relative;

 console.log(docObj.files[0]);

border: 1px solid #e8e8e8;

    var imgObjPreview=document.getElementById(“preview”);

}

    if(docObj.files &&docObj.files[0]){

 

        //火狐下,直接设img属性

.sub {

        imgObjPreview.style.display = ‘block’;

position: absolute;

        imgObjPreview.style.width = ‘150px’;

top: 0;

        imgObjPreview.style.height = ‘180px’; 

left: 0;

    //imgObjPreview.src = docObj.files[0].getAsDataURL();

width: 598px;

 

height: 598px;

    //火狐7上述版本不可能用下面的getAsDataUKoleosL()形式取得,供给弹指间方法

}

    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

 

    }else{

.sub img {

        //IE下,使用滤镜

width: 100%;

        docObj.select();

height: 100%;

        var imgSrc = document.selection.createRange().text;

}

        var localImagId = document.getElementById(“localImag”);

</style>

        //必须设置开头大小

<script>

        localImagId.style.width = “150px”;

window.onload = function() {

        localImagId.style.height = “180px”;

function p(arg) {

        //图片十分的捕捉,幸免用户修改后缀来充数图片

console.log(arg);

    try{

}

        localImagId.style.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)”;

let file = document.querySelector(‘#file’),

        localImagId.filters.item(“DXImageTransform.Microsoft.AlphaImageLoader”).src = imgSrc;

picture = document.querySelector(‘.picture’),

    }catch(e){

wrap = document.querySelector(‘.wrap’),

        alert(“您上传的图片格式不科学,请重新选用!”);

sub = document.querySelector(‘.sub’),

        return false;

show = document.getElementById(‘show’),

    }

showTop = 0,

        imgObjPreview.style.display = ‘none’;

showLeft = 0,

        document.selection.empty();

moveTop = 0,

    }

moveLeft = 0;

        return true;

function move() {

    }

show.onmousemove = function(ev) {

 

let e = ev || window.event;

</script>

e.stopPropagation();

</head>

e.preventDefault();

 

moveTop = e.clientY – picture.offsetTop – wrap.offsetTop –
show.offsetHeight / 2;

<body>

moveLeft = e.clientX – picture.offsetLeft – wrap.offsetLeft –
show.offsetWidth / 2;

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

p(moveLeft);

<tbody>

if (moveTop < 0) {

<tr>

show.style.top = ‘0px’;

<td height=”101″ align=”center”>

console.log(‘上’);

<div id=”localImag”><img id=”preview” src=”002.jpg” width=”150″ height=”180″ style=”display: block; width: 150px; height: 180px;”></div>

} else if (moveLeft < 0) {

</td>

show.style.left = ‘0px’;

</tr>

console.log(‘左’);

<tr>

} else if (moveTop > 100) {

<td align=”center” style=”padding-top:10px;border:1px solid red”><input type=”file” name=”file” id=”doc” style=”width:150px;” onchange=”javascript:setImagePreview();”></td>

show.style.top = ‘100px’;

</tr>

console.log(‘上2’);

</tbody>

} else if (moveLeft > 100) {

</table>

show.style.left = ‘100px’;

</body>

console.log(‘左2’);

</html>

} else {

show.style.top = moveTop + ‘px’;

show.style.left = moveLeft + ‘px’;

sub.style.top = -moveTop * 3 + ‘px’;

sub.style.left = -moveLeft * 3 + ‘px’;

}

}

show.onmouseup = function() {

this.onmousemove = null;

}

}

file.addEventListener(‘change’, function() {

let reader = new FileReader(),

img = wrap.querySelector(‘img’),

subImg = sub.querySelector(‘img’);

reader.readAsDataURL(this.files[0]);

reader.onloadend = function() {

img.src = this.result;

subImg.src = this.result

}

}, false);

move();

}

</script>

</head>

<body>

<div class=”picture”>

<div class=”wrap”>

<img src=”C:\Users\Administrator\Desktop\test.jpg” alt=””>

<div id=’show’></div>

</div>

<input id=”file” class=”upload” type=”file” value=””>

<div class=”subWrap”>

<div class=”sub”>

<img src=”C:\Users\Administrator\Desktop\test.jpg” alt=””>

</div>

</div>

</div>

</body>

<script>

</script>

</html>

相关文章

网站地图xml地图