zoukankan      html  css  js  c++  java
  • 实现上传图片预览

    <title>图片上传预览</title>
    <input type="file" id="fileElem" multiple accept="image/*"  onchange="handleFiles(this)">
    <div id="fileList" style="200px;height:200px;"></div>
    <script>
    	window.URL = window.URL || window.webkitURL;
    	var fileElem = document.getElementById("fileElem"),
    	    fileList = document.getElementById("fileList");
    	function handleFiles(obj) {
    		var files = obj.files,
    			img = new Image();
    		if(window.URL){
    			//File API
    			  //alert(files[0].name + "," + files[0].size + " bytes");
    		      img.src = window.URL.createObjectURL(files[0]); //创建一个object URL,并不是你的本地路径
    		      img.width = 200;
    		      img.onload = function(e) {
    		         window.URL.revokeObjectURL(this.src); //图片加载后,释放object URL
    		      }
    		      fileList.appendChild(img);
    		}else if(window.FileReader){
    			//opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
    			var reader = new FileReader();
    			reader.readAsDataURL(files[0]);
    			reader.onload = function(e){
    				//alert(files[0].name + "," +e.total + " bytes");
    				img.src = this.result;
    				img.width = 200;
    				fileList.appendChild(img);
    			}
    		}else{
    			//ie
    			obj.select();
    			obj.blur();
    			var nfile = document.selection.createRange().text;
    			document.selection.empty();
    			img.src = nfile;
    			img.width = 200;
    			img.onload=function(){
    		     // alert(nfile+","+img.fileSize + " bytes");
    		    }
    			fileList.appendChild(img);
    			//fileList.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"+nfile+"')";
    		}
    	}
    </script>
    

      使用smartUpload组件上传文件时的包:jsmartcom_zh_CN.jar

  • 相关阅读:
    hdu 5001 从任意点出发任意走d步不经过某点概率
    hdu 5007
    hdu 5009 离散化
    hdu 5011 Nim+拿完分堆
    thinkphp 删除多条记录
    thinkphp 实现无限极分类
    图片生成唯一的名字
    html 标签学习
    PHP比较运算!=和!==
    php使用 set_include_path
  • 原文地址:https://www.cnblogs.com/james-roger/p/4975606.html
Copyright © 2011-2022 走看看