js图片上传界面1

来源：互联网发布：数据有效性设置日期编辑：程序博客网时间：2024/06/07 04:04

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.pic_frame{
width: 810px;
height: 600px;
background: #11C2EE;
border: 1px solid red;
}
.pic_butn{
width: 490px;
height: 50px
}
.pics_div{
width: 800px;
height: 100%;
border: 1px solid #FFA500;
}
.pics_div div{
position: realtive;
float: left;
width: 180px;
margin-left: 15px;
height: 120px;
margin-bottom: 10px;
border: 1px solid gray;
}
</style>
<script type="text/javascript">

window.URL = window.URL || window.webkitURL;
function addPic(){
var PicNum = document.getElementById('pics_div').children.length;
if(PicNum>15){alert('不能超过最大上传图片数16');}else{
var fileInput = document.createElement('input');
fileInput.type='file';
fileInput.name='scenicImage';
fileInput.className='fileInput';
fileInput.click();//好不容易，自动打开图片选择
fileInput.onchange=function()
{

if(this.value!=null)
{
var PicDiv = document.createElement('div');
var PicImg = document.createElement('img');
var PicsDiv = document.getElementById('pics_div');

//
var files = this.files;
if(window.URL)
{
PicImg.src= window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
PicImg.width = 180;
PicImg.height = 90;
PicImg.onload = function(e){
window.URL.revokeObjectURL(this.src);//图片加载后释放 object URL
}
if(files[0].size>800*1024)
{
alert('该图片超过800k');
}else if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(this.value))
{
alert('请选择正确的图片格式'+this.value);
}else{
PicDiv.appendChild(PicImg);//img放入div
//取消按钮
var btnCancel = document.createElement('input');
btnCancel.type='button';
btnCancel.value='取消';
btnCancel.top = '0';
btnCancel.style.width='70px';
btnCancel.style.height= '25px';
btnCancel.onclick=function()
{
this.parentNode.parentNode.removeChild(this.parentNode);
}
PicDiv.appendChild(btnCancel);
//修改按钮
var btnUpdate = document.createElement('input');
btnUpdate.type='button';
btnUpdate.value='修改';
btnUpdate.top = '0';
btnUpdate.style.width='70px';
btnUpdate.style.height= '25px';
btnUpdate.onclick=function()
{
//zheshi
var IMGPIC = this.parentNode.childNodes[0];
IMGPIC.click();
}
PicDiv.appendChild(btnUpdate);
PicsDiv.appendChild(PicDiv);
}
}else if(window.FileReader){
//opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(e){

PicImg.src = this.result;
PicImg.width = 180;
PicImg.height = 90;
if(e.total>800*1024){
alert('该图片超过800k');
}else{
PicDiv.appendChild(PicImg);//img放入div
PicsDiv.appendChild(PicDiv);
}
}
}else{
//ie
this.select();
this.blur();
var nfile = document.selection.createRange().text;
document.selection.empty();
PicImg.src = nfile;
PicImg.width = 180;
PicImg.height = 90;
PicImg.onload=function(){
alert(nfile+","+PicImg.fileSize + " bytes");
}

if(PicImg.fileSize>800*1024){
alert('该图片超过800k');
}else{
PicDiv.appendChild(PicImg);//img放入div
PicsDiv.appendChild(PicDiv);
}
//fileList.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"+nfile+"')";
}
}
}
}
}
</script>
</head>
<body>
<div id="pic_frame" class="pic_frame">
<form method="post" action="">
<div id="pic_butn" class="pic_butn">
<input type="button" value="添加图片" onclick="addPic()" />
<input type="submit" value="提交" />

</div>
<div id="pics_div" class="pics_div">

</div>
</form>
</div>
</body>
</html>

0 0