js 实现异步上传图片+预览
两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link href="~/Content/Css/bootstrap.3.3.4.min.css" rel="stylesheet" />
<script src="~/Scripts/Jquery-2.1.4.min.js"></script>
<script src="~/Scripts/bootstrap.3.3.4.min.js"></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" id="testform"> <input type="hidden" value="1" id="id" name="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" name="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" name="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" name="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">
<a class="btn btn-small btn-primary" onclick="saveUser()">方式一</a>
<a class="btn btn-small btn-danger" onclick="saveUser2()">方式二</a>
</div>
</div>
</form>
</div>
</div>
</div>
<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);
}
});
})
//方式一 Jquery实现
function saveUser2() {
var id = $("#id").val().trim();
var uname = $("#uname").val().trim();
var pwd = $("#pwd").val().trim();
var file = document.getElementById("file").files[0];
var formData = new FormData();
formData.append('id', id);
formData.append('uname', uname);
formData.append('pwd', pwd);
formData.append('file', file); $.ajax({
url: "/home/about",
type: "post",
data: formData,
contentType: false,
processData: false,
mimeType: "multipart/form-data",
success: function (data) {
console.log(data);
},
error: function (data) {
console.log(data);
}
});
} //方式二 原生ajax实现
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 formData = new FormData();
formData.append("uname", uname); // 可以增加表单数据
formData.append("id", id);
formData.append("pwd", pwd);
if (file) {
formData.append("file", file);
} //得到xhr对象
var xhr = null;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} xhr.open("post", "/home/about", true);//设置提交方式，url，异步提交
xhr.onload = function () {
var data = xhr.responseText; //得到返回值
alert(data);
}
xhr.send(formData);
}
</script>
</body>
</html>
注意：
1、用JQuery方式需要加两个参数 contentType: false 和processData: false，这两个参数是为了设置ajax对file文件对象进行序列化
2、两种方式在组织参数时都需要使用var formData = new FormData()
js 实现异步上传图片+预览的更多相关文章
- JS 上传图片 + 预览功能（一）
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- 去除ckeditor上传图片预览中的英文字母
去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...
- JS实现的图片预览功能
之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...
随机推荐
- nginx + keepalived 主从模式
转自:https://www.cnblogs.com/kevingrace/p/6138185.html 负载均衡技术对于一个网站尤其是大型网站的web服务器集群来说是至关重要的!做好负载均衡架构,可 ...
- npm命令
简介:npm(node.js package manager)是Node.js的包管理器 .它创建于2009年,作为一个 开源项目,帮助开发人员轻松共享打包的代码模块 ## 默认方式初始化npm.(进 ...
- JS中if判断 非空即为真 非0即为真
1.字符串参与判断时:非空即为真判断字符串为空的方法if(str!=null && str!=undefined && str !='')可简写为if(!str){ ...
- 与TIME_WAIT相关的几个内核参数
问题 公司用浏览器访问线上服务一会失败一会成功,通过ssh连接服务器排查时发现ssh也是这样: 检查 抓包后发现建立连接的请求已经到了服务器,但它没有响应: 纠结了好久,后来在腾讯云技术支持及查了相关 ...
- Mysql与Postgresql
在经过一段时间的数据库学习之后,我接触到了Mysql与Postgresql两种数据库管理系统,由于我对这两者的理解都停留在很浅的层面,就不在此比较两者的好坏,主要在这里比较一下两者的入门指令(当然两者 ...
- Python线程模块threading
线程,程序执行的最小单元,单线程处理多个任务只能一个处理完后继续处理下一个直到全部处理完,多线程处理任务会比单线程处理起来快吗?在python程序里得看情况,首先有GIL锁的存在导致同一时刻只能有一个 ...
- java 随机出题四则运算
作业要求来源于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2186 我的github地址:https://github.com/k ...
- HDU 1560 DNA sequence（DNA序列）
HDU 1560 DNA sequence(DNA序列) Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- ssh整合，hibernate查询表数量count以及批处理添加
String sql = "select count(*) from LogEntity as log "; Long count = (Long)getHibernateTemp ...
- 线程（Thread，ThreadPool）、Task、Parallel
线程(Thread.ThreadPool) 线程的定义我想大家都有所了解,这里我就不再复述了.我这里主要介绍.NET Framework中的线程(Thread.ThreadPool). .NET Fr ...