<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. xml基础小结

    XML基础 1)XML的作用 1.1 作为软件配置文件 1.2 作为小型的“数据库” 2)XML语法(由w3c组织规定的) 标签: 标签名不能以数字开头,中间不能有空格,区分大小写.有且仅有一个根标签 ...

  2. Hibernate查询之HQL查询

    转自:http://blog.csdn.net/xiao_yi/article/details/1733342 Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(H ...

  3. Mesh.Bake Scaled Mesh PhysX CollisionData的性能问题

    最近在做项目优化时,遇到Mesh.Bake Scaled Mesh PhysX CollisionData这个问题,随手记录一下. profiler中显示的cpu波峰瓶颈中,Mesh.Bake Sca ...

  4. centos中使用python遇到的几个问题

    用python搞了一个从excel中读取cobbler节点信息并加入cobbler中的脚本,运行的过程中出了不少问题,这里记录下来,方便日后查找! 一.yum install python,我通过这个 ...

  5. [C#] 常用工具类——应用程序属性信息访问类

    using System; using System.Collections.Generic; using System.Text; using System.Reflection; namespac ...

  6. WCF客户端和服务器时间不一致,导致通道建立失败的问题)

    本文转载:http://www.cnblogs.com/bcbr/articles/2288374.html 最近,经常有客户反应,前天还用的好好的系统,今天就不能用了. 考虑到系统近来没有做过改动和 ...

  7. C# 动态创建出来的窗体间的通讯 delegate3

    附件1:http://files.cnblogs.com/xe2011/CSharp_WindowsForms_delegate03.rar 一个RTF文件管理器 描述 Form2,Form3,For ...

  8. mysql in 的两种使用方法

    简述MySQL 的in 的两种使用方法: 他们各自是在 in keyword后跟一张表(记录集).以及在in后面加上字符串集. 先讲后面跟着一张表的. 首先阐述三张表的结构: s(sno,sname. ...

  9. [D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive

    Integrating D3 with Angular can be very simple. In this lesson, you will learn basic integration as ...

  10. BTrace使用总结

    btracejvisualvmhotswap  一.背景        在生产环境中可能经常遇到各种问题,定位问题需要获取程序运行时的数据信息,如方法参数.返回值.全局变量.堆栈信息等.为了获取这些数 ...