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

效果图：

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

<html>

<head>

    <title>Title</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <script>

//        html5实现图片预览功能

        $(function(){

            $("#file").change(function(e){

                var file = e.target.files[0]||e.dataTransfer.files[0];

                $('#photoCover').val(document.getElementById("file").files[0].name);

                if(file){

                    var reader = new FileReader();

                    reader.onload=function(){

                        $("img").attr("src", this.result);

                    }

                    reader.readAsDataURL(file);

                }

            });

        })

        function saveUser(){

            var id = $("#id").val().trim();

            var uname = $("#uname").val().trim();

            var pwd = $("#pwd").val().trim();

            var file = document.getElementById("file").files[0];

//            原生ajax实现文件上传

            var form = new FormData();

            form.append("uname", uname); // 可以增加表单数据

            form.append("id", id);

            form.append("pwd", pwd);

            if(file){

                form.append("file", file);

            }

            var xhr = null; //得到xhr对象

            if(XMLHttpRequest){

                xhr = new XMLHttpRequest();

            }else{

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhr.open("post", "${ctx}/user/save", true);//设置提交方式，url，异步提交

            xhr.onload = function ()

            {

                var data = xhr.responseText;    //得到返回值

               // alert(data);

                var errorMsg = JSON.parse(data);

                alert(errorMsg.msg);

                if(errorMsg.code == "0"){

                    alert("success"); //成功

                }

            }

            xhr.send(form);

        }

    </script>

</head>

<body style="overflow:scroll;overflow-y:hidden;overflow-x:hidden">

<div style="height: 20px"></div>

<div class="container">

    <div class="row">

        <div class="col-md-6 col-md-offset-3">

            <form class="form-horizontal" enctype="multipart/form-data" role="form">

                <input type="hidden" value="${user.id}" id="id"/>

                <div class="control-group">

                    <label for="uname" class="col-md-3 control-label span3">姓 名:</label>

                    <div class="col-md-9">

                        <input type="text" class="form-control span3" value="" id="uname"

                               placeholder="请输入姓名">

                    </div>

                </div>

                <div class="control-group">

                    <label for="pwd" class="col-md-3 control-label span3">密码:</label>

                    <div class="col-md-9">

                        <input type="password" class="form-control span3" value="" id="pwd"

                               placeholder="请输入密码">

                    </div>

                </div>

                <div class="control-group">

                    <label  class="col-md-3 control-label span3"></label>

                    <div class="col-md-9">

                        <img src="" width="100px" height="100px">

                    </div>

                </div>

                <div class="control-group">

                    <label for="requirement" class="col-md-3 control-label span3">图片上传</label>

                    <div class="col-md-9">

                        <div class="input-group">

                            <input id="photoCover" class="form-control" readonly type="text">

                            <label class="input-group-btn">

                            <input id="file" type="file" style="left:-9999px;position:absolute;">

                            <span class="btn btn-default">Browse</span>

                            </label>

                        </div>

                    </div>

                 </div>

                <div class="control-group">

                    <label class="col-md-2 control-label span2"></label>

                    <div class="col-md-10">

                        <button type="button" class="btn btn-small btn-primary" onclick="saveUser()">提交</button>

                        <a type="button" class="btn btn-small btn-danger">取消</a>

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

</body>

</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资源大全

    以下转载自: 推荐!国外程序员整理的Java资源大全中文版    https://github.com/akullpp/awesome-java英文版 Java 几乎是许多程序员们的入门语言,并且也是 ...

  2. Jenkins的参数化构建

    一.参数化构建日志 1.查看效果 有时候开发需要查看服务器日志,传统的是需要运维登录服务器拉取开发所需要的服务日志,这么做的弊端是:1.如果日志比较大,拉取耗费时间.占用服务器资源.2.占用运维不必要 ...

  3. 170705、springboot编程之自定义properties

    spring boot使用application.properties默认了很多配置.但需要自己添加一些配置的时候,可以这样用,如下! 在application.properties文件中增加信息 1 ...

  4. HI3518E用J-link烧写裸板fastboot u-boot流程

    Hi3518E的裸板烧写fastboot是不能像HI3531那样,可以通过FB直接烧写.遵循ARM9的烧写流程.其中一般u-boot的烧写流程可分为几类:第一:通过编程器芯片直接烧写:第二通过RVDS ...

  5. 什么是Java序列化和反序列化，如何实现Java序列化

    1.概念 序列化:把Java对象转换为字节序列的过程. 反序列化:把字节序列恢复为Java对象的过程. 2.用途 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通常存放在一个 ...

  6. python调用API

    相信做过自动化运维的同学都用过API接口来完成某些动作.API是一套成熟系统所必需的接口,可以被其他系统或脚本来调用,这也是自动化运维的必修课. 本文主要介绍Python中调用API的几种方式,下面是 ...

  7. mysql创建和删除表

    创建表 简单的方式 CREATE TABLE person ( ), name ), birthday DATE ); 或者是 CREATE TABLE IF NOT EXISTS person ( ...

  8. sql小知识

    1:查询某一段落内的几条数据,按时间降序. LIMIT 5,10; //检索记录行6-15 2:创建视图,  查询出某些类别的数据,保存在视图中.  || 的优先级高于and ) ); 3:  查询出 ...

  9. cocos代码研究（13）Widget子类EditBox学习笔记

    理论基础 一个用来输入文本的类,继承自 Widget , 以及 IMEDelegate. 代码部分 Public枚举类型 enum KeyboardReturnType键盘的返回键类型. enum I ...

  10. zw版【转发·台湾nvp系列Delphi例程】HALCON MoveRectangle2

    zw版[转发·台湾nvp系列Delphi例程]HALCON MoveRectangle2 procedure TForm1.Button1Click(Sender: TObject);var img ...