<input >上传图片文件的解说

来源：互联网发布：网络的大致发展史编辑：程序博客网时间：2024/05/17 08:35

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">         #div_img{         width: 200px;         height: 200px;         border:1px solid red;         }         .poto{         width: 200px;         height: 200px;         }         #tt{         width: 200px;         height: 200px;         }</style><script type="text/javascript">       function $$(id) {    return document.getElementById(id);}//选择上传文件时调用的函数function fileUpload_PrevImageFile(f) {//检测浏览器是否支持FileReader对象    if (typeof FileReader == 'undefined') {        alert("检测到您的浏览器不支持FileReader对象！");    }    var strHTML = "";    for (var intI = 0; intI < f.length; intI++) {        var tmpFile = f[intI];        var reader = new FileReader();reader.readAsDataURL(tmpFile);        reader.onload = function(e) {            strHTML = strHTML + "<span>";            strHTML = strHTML + "<img id='tt' src='" + e.target.result + "' alt=''/>";            strHTML = strHTML + "</span>";            $$("div_img").innerHTML = strHTML;        }    }}</script></head><body><input type="file" id="btn" onChange="fileUpload_PrevImageFile(this.files);"/ ><div id="div_img"></div></body></html>

看了陶国荣的HTMl5实战自己改写的代码

0 0