图片上传之前的预览

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<style>
			#fileInfo{
				width:950px;
				height:500px;
				border:1px solid #ccc;
			}
			#image-holder img{
				margin-left:10px;
			}
			#myFile{
				width:950px;
				height:300px;
				border:1px solid #ccc;
			}
		</style>
	</head>
	<body>
	<form id="formList" name="formList">
	<input id="fileUpload" type="file" name="file" multiple="multiple" 
		 value="选择要上传的图片"/><br />
	
    	<div id="image-holder" style="width:950px;height:250px;">
    		
    	</div>
		<div id="myFile">
			<table style="border-collapse:separate; border-spacing:10px;" cellspacing="10">
			
			</table>
		</div>
    </div></form>
	</body>
	<script type="text/javascript">
  $("#fileUpload").change(function(){//当选择文件并进行确定时，触发的时间
  	if(typeof(FileReader!=undefined)){//当该浏览器支持FileReader对象时
  		var fileCount=$(this)[0].files.length;//获取上传文件的个数;
  		var fileUpload=document.getElementById("fileUpload");
  		var image_holder = $("#image-holder");
  		for(var i=0;i<fileUpload.files.length;i++){
  			var reader=new FileReader();//创建FileReader对象
  			var fileName=fileUpload.files[i].name;//文件名，
  			var fileType=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();//获取类型并转化为小写
  			var filet=fileUpload.files[i];//多文件中的每一个file对象
  			reader.readAsDataURL(filet);//读取文件
  			var src=window.URL.createObjectURL(filet);
  			reader.onload=function(f){//当读取完成之后会触发的函数
  				if(fileType=="docx"||fileType=="pdf"){
  					$("#myFile").append("<tr><td>附件:</td><td>"+fileName+"</td>");
  				}else if(fileType == "gif" || fileType == "png" || fileType == "jpg" || fileType == "jpeg" ){
  					$("<img />", {
                      "src": f.target.result,
                      "width":"300px",
                      "height":"250px",
                      "onclick":"fun()",
                	}).appendTo(image_holder);
  				}
  			}
  		}
  	}
  });
   function fun(){
   	alert("---");
   }
	</script>
</html>
图片上传之前的预览

猜你喜欢
