<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. Pgsql数据库jsonb操作函数集合

    CREATE OR REPLACE FUNCTION "json_object_del_path"( "json" json, "key_path&q ...

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

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

  3. [C#] 常用工具类——系统日志类

    using System; using System.Collections.Generic; using System.Text; using System.Diagnostics; namespa ...

  4. MYSQL 系统命令 源码定位

    sql_cmd.h enum enum_sql_command { SQLCOM_SELECT, SQLCOM_CREATE_TABLE, SQLCOM_CREATE_INDEX, SQLCOM_AL ...

  5. Linux内核源代码情景分析系列

    http://blog.sina.com.cn/s/blog_6b94d5680101vfqv.html Linux内核源代码情景分析---第五章 文件系统  5.1 概述 构成一个操作系统最重要的就 ...

  6. android开发之bitmap使用

    bitmap是android中重要的图像处理工具类,通过bitmap可以对图像进行剪切.旋转.缩放等操作,同时还可以指定格式和压缩质量保存图像文件. 一.拿到一个Bitmap对象 查看源码我们知道,B ...

  7. jackson 学习笔记

    Jackson以优异的解析性能赢得了好评,今天就看看Jackson的一些简单的用法. Jackson使用之前先要下载,这里一共有三个jar包,想要获得完美的Jackson体验,这三个jar包都不可或缺 ...

  8. 购买SSD固态硬盘须当心,你知道什么是SLC、 MLC、TLC闪存芯片颗粒吗?

    固态硬盘凭借其存取速率超快等自身优势,被越来越多的电脑爱好者所青睐,并迅速普及到了广大用户的电脑中,因为固态硬盘与传统机械硬盘相比,确实在运行效率等方面有了质的提升,但是亦是美网络小编要提醒大家的是, ...

  9. CentOS 6.7下iPython提示“WARNING: Readline services not available or not loaded.”的解决办法

    yum install readline-devel 然后,使用pip或者easy_install安装readline即可 pip install readline

  10. Linux Apache SVN

    yum install mod_dav_svn subversion  httpd mkdir /var/www/svnsvnadmin create /var/www/svn/puppetcd /v ...