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将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...
随机推荐
- centos7.4卸载再安装mariadb服务无法启动问题
今天yum安装MariaDB完成后,启动服务时一直报以下错误 Job for mariadb.service failed. See ‘systemctl status mariadb.service ...
- nginx运用
1.nginx的 命令 start nginx 这样,nginx 服务就启动了.打开任务管理器,查看 nginx.exe 进程,有二个进程会显示,占用系统资源,那是相当的少.然后再打开浏览器,输入 h ...
- springMVC注解总结
由于BookController类加了value="/book"的@RequestMapping的注解,所以相关路径都要加上"/book",即请求的url分别为 ...
- bat实现往hosts文件追加内容
做个笔记. @echo off ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::: ...
- Http协议&Servlet
http协议 针对网络上的客户端 与 服务器端在执行http请求的时候,遵守的一种规范. 其实就是规定了客户端在访问服务器端的时候,要带上哪些东西, 服务器端返回数据的时候,也要带上什么东西. 版本 ...
- 解析JavaScript中的sort()排序方法以及原理
Array.sort()方法将数组中的元素进行排序,返回排序后的数组,默认是按照升序排序的.sort方法会调用数组中每一项的toString()方法,然后按照ascii编码进行排序,如果数组含有und ...
- 【使用指南】ComponentOne Enterprise .NET开发控件集
为方便广大 .NET开发人员更好的使用 ComponentOne Enterprise .NET开发控件集,葡萄城专门推出了 ComponentOne Enterprise 使用指南,该指南详细地介绍 ...
- c# 集合去重并筛选
(from context in retDataList group context by context.ResourceId into g select g.OrderByDescending(b ...
- krpano生成全景图
1.下载krpano工具 第一次我下载的有水印,但是第二次下载的便没了,原因我也不清楚.下载好后不要急着打开.exe程序 2.生成全景图 将全景图拖入MAKE VTUOR (NORMAL) DROPL ...
- DataFrame 重新设置索引: reindex 和 reset_index 的区别
将两个 DataFrame 拼接后,想要对拼接后的 DataFrame 重新设置索引要用 reset_index 方法,要想让之前的索引消失,传入参数:drop=True.具体事例: data2017 ...