<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. 《神经网络和深度学习》系列文章三:sigmoid神经元

    出处: Michael Nielsen的<Neural Network and Deep Leraning>,点击末尾“阅读原文”即可查看英文原文. 本节译者:哈工大SCIR硕士生 徐伟 ...

  2. 缺少HTML Doctype造成的样式问题

    很简单的一个登陆界面: 代码: <html> <head> <style type="text/css"> form span { displa ...

  3. 375. Guess Number Higher or Lower II

    最后更新 四刷? 极大极小算法..还是叫极小极大的.. 首先要看怎么能保证赢. 比如2个数,猜第一个猜第二个都能保证下一轮我们赢定了,为了少交钱,我们猜小的. 比如3个数,猜第二个才能保证下一轮再猜一 ...

  4. 20169210《Linux内核原理与分析》第五周作业

    本次内容分为两部分,第一部分是实验,第二部分是教材的第四章和第六章. 第一部分:实验 本次的实验内容是构造一个简单的Linux系统MenuOS,过程如下. 首先使用如下命令进入LinuxKernel ...

  5. trace 日志

    关闭 ORACLE trace 日志功能  alter system set trace_enabled=false  select * from v$parameter where NAME lik ...

  6. 监听器 listener 样例

    1. 在web.xml 添加 <listener>    <listener-class>listener.TestListener</listener-class> ...

  7. Java基础知识强化之IO流笔记30:字节流4种方式复制mp4并测试效率

    1. 需求:把e:\\哥有老婆.mp4 复制到当前项目目录下的copy.mp4中 字节流四种方式复制文件: • 基本字节流一次读写一个字节 • 基本字节流一次读写一个字节数组 • 高效字节流一次读写一 ...

  8. javascript中的call()和apply应用

    在javascript开发过程中,如果有看过几个javascirpt代码库,就会发现经常使用到call()和apply()函数,call()和aplly()结合javascript允许传递函数名,这种 ...

  9. Powerdesigner中如何生成测试数据

    设计表完成以后,我们需要生成一些测试数据,可以直接更新到数据库中,下面我们就来试试: 第一步:建立需要的Profiles测试文件,[Model]--[Test Data Profiles],如图所示: ...

  10. String类比较,String类运算比较,String运算

    String类比较,String类运算比较 >>>>>>>>>>>>>>>>>>>&g ...