<form id="picForm" name="picForm"  method="post" enctype="multipart/form-data">
  <input type="file" id="photosfile" name="files" />
  <button class="btn">请选择上传图片</button>
 </form>
<script type="text/javascript">
    document.all.photosfile['files'];
</script>
 
console.log(document.all.photosfile['files'][0]);
 
 
 
//及时查看图片效果
html:
    <div id="show_img"><img src="__IMAGES__/head_img/user.png"></div>
     <input id="file_upload" name="file_upload" type="file" multiple="true">
js:
$("#file_upload").on("change",function(){
  var fileTag = document.getElementById("file_upload").files[0];
  if (fileTag) {
   var reader = new FileReader();
            reader.readAsDataURL(fileTag);
            $("#show_img").find("img").remove();
            reader.onload = function (e) {
                var urlData = this.result;
                document.getElementById("show_img").innerHTML += "<img src='" + urlData + "' alt='" + fileTag.name + "'/>";
            };
        }else{
            return;
        }
  return false;
 })

js获取上传文件信息并及时查看的更多相关文章

  1. js获取上传文件内容(未完待续)

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  2. Atitit.js获取上传文件全路径

    Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...

  3. js获取上传文件内容

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  4. JS获取上传文件的绝对路径,兼容IE和FF

    <input type="file" id="fileBrowser" name="fileBrowser" size="5 ...

  5. JS 获取上传文件的内容

    <div> 上传文件 : <input type="file" name = "file" id = "fileId" / ...

  6. js 获取上传文件的字节数及内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js获取上传文件的绝对路径

    在html中    <input type="file" id="importFile" />    <input type="bu ...

  8. JS获取上传文件的名称、格式、大小

    <input id="File1" type="file" onchange="checkFile(this)" /> 方式一) ...

  9. struts2 JS获取上传文件的绝对路径,兼容IE和FF

    因为file控件上传失败后会自动清空,所以使用文本框来保存上传路径,而且在不同的浏览器下,控件的样式也需要兼容.下面是自己用到的实例 // 初始化判断浏览器的版本,根据版本的不同使用不同的样式func ...

随机推荐

  1. hdoj 5443 The Water Problem【线段树求区间最大值】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5443 刷道水题助助兴 #include<stdio.h> #include<stri ...

  2. 解决SDK下载时速度过慢的问题

    1.打开android sdk manager 2.打开tool->options,如图所示 3.将Proxy Settings 里的HTTP Proxy Server和HTTP Proxy P ...

  3. 我最喜欢的visual studio 2013的新特性

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:我最喜欢的visual studio 2013的新特性.

  4. sql server 分组统计数据

    说明:group by是sql中对数据表中的数据进行分组的,在select列表中出现的字段必须全部出现在group by 字段中,出现在聚合函数中的字段在group by中可有可无,没有出现在sele ...

  5. 距离矢量路由协议举例——RIP

    1. 工作原理 •RIP 是一种分布式的基于距离矢量的路由选择协议. •RIP 协议要求网络中的每个路由器都要维护从它自己到其它每个目的网络的距离记录. •RIP 协议中的"距离" ...

  6. Swipecards

    https://github.com/Diolor/Swipecards https://github.com/kikoso/Swipeable-Cards

  7. myeclipse自动生成可持久化类的映射文件的方法

    1.打开DB Browser,新建一个数据库的连接,找到想要持久化操作的数据库表的图标,右键选择hibernate reverse engineering 2.之后出现如下所示: java src f ...

  8. (转载)Eclipse下配置Github环境 .

    总的参考文档:EGit User Guide http://wiki.eclipse.org/EGit/User_Guide Address: http://www.linuxidc.com/Linu ...

  9. React Native Tips

    1. 检查连接的android设备 android devices 2. 启动android studio android 3. 摇动手机选开发模式,填入server的ip和port 4. Parse ...

  10. hdu2035java

    人见人爱A^B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...