教程集 > jQuery > jquery 教程 > 正文 js 用户自定义多文件上传代码

js 用户自定义多文件上传代码

发布时间：2023-12-21 编辑：jiaochengji.com

教程集为您提供js 用户自定义多文件上传代码等资源，欢迎您收藏本站，我们将为您提供最新的js 用户自定义多文件上传代码资源

提示：您可以先修改部分代码再运行

js 用户自定义多文件上传代码  <!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 title="选择图片"  		 size =45 onchange =javascript:showphoto();><br />"  		   "<img  alt="js 用户自定义多文件上传代码"  width="0" id="Image"  		   i "" name =Image src=""  		 title =图片预览 style =margin-left: 55px; >";  aElement.innerHTML=html;  //aElement.value="thanks";   //aElement.onclick=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].onerror=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>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jQuery文件上传插件 jcUpload
Jquery Uploadify多文件上传带进度条且传递自己的参数
 PHP 中使用 TUS 协议来实现大文件的断点续传
 js去掉空格的代码
 php 文件上传实例剖析
 js 禁止文本框输入空格的代码
 js判断上传文件大小三种方法
 php文件上传代码大全(实例分享)
微信端h5页面如何调用分享页面的接口
 JQuery上传插件Uploadify使用详解及错误处理

上一篇：javascript获取浏览器页面的宽度和高度下一篇：超酷js导航菜单效果

[关闭]

js 用户自定义多文件上传代码

最近更新

浏览排行