采用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 jar命令及补丁方法

    用法: jar {ctxui}[vfmn0PMe] [jar-file] [manifest-file] [entry-point] [-C dir] files ...选项: -c 创建新档案 -t ...

  2. opencv中Mat格式的数据访问.at

    opencv3中图形存储基本为Mat格式,如果我们想获取像素点的灰度值或者RGB值,可以通过image.at<uchar>(i,j)的方式轻松获取. Mat类中的at方法对于获取图像矩阵某 ...

  3. CentOS中为新用户添加sudo权限

    1.切换成root权限 su root 2.查看/etc/sudoers文件权限,如果只读权限,修改为可写权限 ls -l /etc/sudoers 3.如果是只读进行如下操作 chmod /etc/ ...

  4. C# 生成四位数字字母混合验证码

    private static void Rand() { var arr = new List<string>(); ; i < ; i++) { arr.Add(i.ToStrin ...

  5. 构建vue项目(vue 2.x)时的一些配置问题(持续更新)

    基于前文,使用vue-cli脚手架工具构建项目,并使用了webpack,那么我在项目中遇到的一些与配置相关的问题将在这里进行汇总. 1.代码检查问题 由于我们在构建项目时,使用了Eslint对我们的项 ...

  6. Python开发【笔记】:接口

    接口 什么是接口 ? 接口只是定义了一些方法,而没有去实现,多用于程序设计时,只是设计需要有什么样的功能,但是并没有实现任何功能,这些功能需要被另一个类(B)继承后,由 类B去实现其中的某个功能或全部 ...

  7. python通过os.walk() 遍历出多级目录下所有文件绝对路径

    代码如下 将遍历出来的路径全部添加到列表中: def get_all_abs_path(source_dir): path_list = [] for fpathe, dirs, fs in os.w ...

  8. jQuery实现节点克隆、替换和互换

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

  9. Swagger生成的接口需要权限验证的处理方法

    通常开发API的时候需要对接口进行权限验证,而我们在使用Swagger生成接口文档界面的时候,直接调用需要权限验证的接口会提示"当前用户没有登陆" 为了解决此问题,我们需要更改一下 ...

  10. C++ Builder创建和调用dll中的资源

    程序开发中经常会用到一些图标.图片.光标.声音等,我们称它们为资源(Resource).当多个窗口用到同样的资源时,可以将这些公共的资源放到一个dll文件里调用,这样,由于定位资源比在磁盘中定位文件花 ...