<!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=gb2312" />
<title>批量上傳</title>
<script type="text/javascript">
var attachname = "attach";
var i=1;
function addInput(){
if(i<10){
var attach = attachname + i ;
if(createInput(attach))
i=i+1;
}
}
function deleteInput(){
if(i>1){
i=i-1;
if(!removeInput())
i=i+1;
}
}
function createInput(nm){
var aElement=document.createElement("div");
var html = "附件（"+i+"）<input type="file" id="FileUpload"
+ i + "" name="FileUpload"
+ i + "" title="選擇圖片" size="45" οnchange="javascript:showphoto();"><br />"
+ "<img alt="js 用戶自定義多文件上傳代碼" width="0" id="Image"
+ i + "" name="Image"
+ i + "" src="" title="圖片預覽" style="margin-left: 55px;" >";
aElement.innerHTML=html;
//aElement.value="thanks";
//aElement.οnclick=Function("asdf()");
if(document.getElementById("upload").appendChild(aElement) == null)
return false;
return true;
}
function removeInput(nm){
var aElement = document.getElementById("upload");
if(aElement.removeChild(aElement.lastChild) == null)
return false;
return true;
}
function showphoto(){
var re=/.(jpg|jpeg|JPG|JPEG)$/;
var x=document.getElementById('upload').getElementsByTagName('input');
for(r=0;r<x.length;r++){
if ((!re.test(document.getElementById("FileUpload"+[r+1]).value)) & (document.getElementById("FileUpload"+[r+1]).value!=""))
{
alert("只允許上傳jpg文件！");
document.getElementById("FileUpload"+[r+1]).outerHTML=document.getElementById("FileUpload"+[r+1]).outerHTML.replace(/value=w/g,'');
document.getElementById("Image"+[r+1]).style.width="0px";
document.getElementById("Image"+[r+1]).src="";
}else if (document.getElementById("FileUpload"+[r+1]).value!="")
{
document.getElementById("Image"+[r+1]).style.width="100px";
document.getElementById("Image"+[r+1]).src=document.getElementById("FileUpload"+[r+1]).value;
}
}
}
function newInput(){
var x=document.getElementById('upload').getElementsByTagName('img');
for(r=0;r<9;r++){
addInput();
x[r].width="100";
x[r].src=document.getElementById("smPicture").value.replace("sm","sm"+[r+1]);
//x[r].οnerrοr=function(){deleteInput()};
}
}
</script>
<script type="text/javascript">
onload=function(){
newInput();
}
</script>
</head>
<body>
<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="刪除附件" onclick="deleteInput()">
<span id="upload"></span>
<input name="smPicture" type="hidden" id="smPicture" value='http://222.70.206.26/img/5/5000011_sm.jpg'>
</body>
</html>
Js實現文件上傳
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章