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

  • 相关阅读:
    pass cloudcc
    eclipse生成javaDoc时,出现"编码GBK 的不可映射字符"
    tabWidget 直布局
    用 Navicat for Oracle 管理 Oracle10g/11g 数据库
    Aspx页面内 成员变量丢失的问题
    AspNet2.0页面生命周期
    【Z】浅析豆瓣的 Google Analytics 应用
    绑定SqlDataSource的Gridview字符串字段长度截取(转)
    Java web 推荐书籍
    关于Reapeter的总结
  • 原文地址:https://www.cnblogs.com/james-roger/p/4975606.html
Copyright © 2011-2022 走看看