采用html5使得选择图片改变时，预览框中图片随之改变。input文件选择框美化。原生js完成文件异步提交

效果图：

代码如下，可直接复制并保存为html文件打开查看效果

  1. <html>
  2. <head>
  3.     <title>Title</title>
  4.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  5.  
  6.     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  7.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  8.  
  9.     <script>
  10.  
  11. //        html5实现图片预览功能
  12.         $(function(){
  13.             $("#file").change(function(e){
  14.                 var file = e.target.files[0]||e.dataTransfer.files[0];
  15.                 $('#photoCover').val(document.getElementById("file").files[0].name);
  16.                 if(file){
  17.                     var reader = new FileReader();
  18.                     reader.onload=function(){
  19.                         $("img").attr("src", this.result);
  20.                     }
  21.  
  22.                     reader.readAsDataURL(file);
  23.                 }
  24.             });
  25.         })
  26.  
  27.         function saveUser(){
  28.             var id = $("#id").val().trim();
  29.             var uname = $("#uname").val().trim();
  30.             var pwd = $("#pwd").val().trim();
  31.             var file = document.getElementById("file").files[0];
  32.  
  33. //            原生ajax实现文件上传
  34.             var form = new FormData();
  35.             form.append("uname", uname); // 可以增加表单数据
  36.             form.append("id", id);
  37.             form.append("pwd", pwd);
  38.             if(file){
  39.                 form.append("file", file);
  40.             }
  41.  
  42.             var xhr = null; //得到xhr对象
  43.             if(XMLHttpRequest){
  44.                 xhr = new XMLHttpRequest();
  45.             }else{
  46.                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
  47.             }
  48.  
  49.             xhr.open("post", "${ctx}/user/save", true);//设置提交方式，url，异步提交
  50.             xhr.onload = function ()
  51.             {
  52.                 var data = xhr.responseText;    //得到返回值
  53.                // alert(data);
  54.                 var errorMsg = JSON.parse(data);
  55.                 alert(errorMsg.msg);
  56.                 if(errorMsg.code == "0"){
  57.                     alert("success"); //成功
  58.                 }
  59.  
  60.             }
  61.             xhr.send(form);
  62.  
  63.         }
  64.     </script>
  65.  
  66. </head>
  67. <body style="overflow:scroll;overflow-y:hidden;overflow-x:hidden">
  68. <div style="height: 20px"></div>
  69. <div class="container">
  70.     <div class="row">
  71.  
  72.         <div class="col-md-6 col-md-offset-3">
  73.             <form class="form-horizontal" enctype="multipart/form-data" role="form">
  74.  
  75.                 <input type="hidden" value="${user.id}" id="id"/>
  76.                 <div class="control-group">
  77.                     <label for="uname" class="col-md-3 control-label span3">姓 名:</label>
  78.                     <div class="col-md-9">
  79.                         <input type="text" class="form-control span3" value="" id="uname"
  80.                                placeholder="请输入姓名">
  81.                     </div>
  82.                 </div>
  83.  
  84.                 <div class="control-group">
  85.                     <label for="pwd" class="col-md-3 control-label span3">密码:</label>
  86.                     <div class="col-md-9">
  87.                         <input type="password" class="form-control span3" value="" id="pwd"
  88.                                placeholder="请输入密码">
  89.                     </div>
  90.                 </div>
  91.  
  92.                 <div class="control-group">
  93.                     <label  class="col-md-3 control-label span3"></label>
  94.                     <div class="col-md-9">
  95.                         <img src="" width="100px" height="100px">
  96.                     </div>
  97.                 </div>
  98.  
  99.                 <div class="control-group">
  100.  
  101.                     <label for="requirement" class="col-md-3 control-label span3">图片上传</label>
  102.                     <div class="col-md-9">
  103.                         <div class="input-group">
  104.                             <input id="photoCover" class="form-control" readonly type="text">
  105.                             <label class="input-group-btn">
  106.                             <input id="file" type="file" style="left:-9999px;position:absolute;">
  107.                             <span class="btn btn-default">Browse</span>
  108.                             </label>
  109.                         </div>
  110.                     </div>
  111.                  </div>
  112.  
  113.                 <div class="control-group">
  114.                     <label class="col-md-2 control-label span2"></label>
  115.                     <div class="col-md-10">
  116.                         <button type="button" class="btn btn-small btn-primary" onclick="saveUser()">提交</button>
  117.                         <a type="button" class="btn btn-small btn-danger">取消</a>
  118.                     </div>
  119.                 </div>
  120.             </form>
  121.         </div>
  122.     </div>
  123. </div>
  124.  
  125. </body>
  126. </html>

原生js实现ajax的文件异步提交功能、图片预览功能.实例的更多相关文章

  1. js实现form表单提交，图片预览功能

    代码如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; ...

  2. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  3. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  4. 34)django-上传文件,图片预览功能实现

    目录 文件上传      1)form表单提交上传(会刷新)      2)ajax上传      3)iframe      4)图片上传预览(思路保存文件的时候,把文件保存文件的路径反馈回,客户端 ...

  5. dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

    1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...

  6. 通过file文件选择图片预览功能

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

  7. JS实现的图片预览功能

    之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

  8. javascript实现文件上传之前的预览功能

    1.首先要给上传文件表单控件和图片控件设置name属性 <div class="form-group">                    <label fo ...

  9. 利用js加载本地图片预览功能

    直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safa ...

随机推荐

  1. Java开发环境的搭建（jdk,eclipse）

    一.java 开发环境的搭建 这里主要说的是在windows 环境下怎么配置环境. 1.首先安装JDK java的sdk简称JDK ,去其官方网站下载最近的JDK即可. http://www.orac ...

  2. 170509、文本编辑器编写的shell脚本在linux下无法执行的解决方法

    今天碰到一个奇怪的问题,编写好的shell脚本再linux上执行一直提示找不到文件或目录,后来想想是文本编辑器的问题,记录下来!!! 1.查看当前文本格式 Notepad++界面中,在右下角有文件格式 ...

  3. 新增form表单，post提交.2

  4. Quartz学习记录

    参考资料: 官方网站 Quartz使用总结

  5. vsftpd文件服务器安装与配置

    -d<登入目录>:指定用户登入时的启始目录:. -s<shell>:指定用户登入后所使用的shell: /sbin/nologin指的是不允许login当前Linux系统.当用 ...

  6. form表单上传图片问题:线下可以而线上不可以

    由于上传图片需要一定时间,而线下速度快线上速度慢. 所以如果你的上传窗口是弹出界面,那么就会面临上传未完成就关闭了该界面.导致上传失败.

  7. MySQL 的mysqldump备份

    MySQL 的mysqldump备份 来自<mysql技术内幕 innodb存储引擎> --single-transaction:只对innodb表有效 --lock-tables:对My ...

  8. Underscore.js (1.7.0)-集合（Collections）(25)

    稽核函数(数组或对象) each_.each(list, iteratee, [context]) 别名: forEach 遍历list中的所有元素,按顺序用遍历输出每个元素.如果传递了context ...

  9. [py]class的特殊方法

    类方法 解释 hasattr hasattr(class) getattr - setattr - delattr - - - __getattr__ __setattr__ __delattr__ ...

  10. Virtualbox中win7虚拟机中U盘不可用问题的解决

    Virtualbox版本是5.0.0,主机运行多是Ubuntu12.04 LTS,虚拟机是Win7 X64.起初Win7正常运行,Virtualbox的增强功能已安装.下面是如何一步一步解决U盘不可用 ...