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将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...
随机推荐
- 作业（更新ing）
暴政警告 2019.4.19 1.YBT完成 7 道题目(1)广搜 3 道 (2)最短路 4 道 2.写至少 2 篇博客 (据说集中精力,一个上午/下午就能写完) 1. 一个 又一个 球细胞数目 ...
- UML类图新手入门级介绍（转）
首先,看动物矩形框,它代表一个类(Class).类图分三层,第一层显示类的名称,如果是抽象类,则就用斜体显示.第二层是类的特性,通常就是字段和属性.第三层是类的操作,通常是方法或行为.前面的符号,+ ...
- 利用Android-FingerprintManager类实现指纹识别
安卓指纹识别 利用FingerprintManager主类进行指纹识别. Github项目地址 在安卓6.0中新增了API,FingerprintManager类,它是Google提供的帮助访问指纹硬 ...
- Price Channel Breakout 交易系统简价及源码
Price Channel Breakout 交易系统简价及源码 既然这个版有交易系统的模型报告,小弟先在这裡野人献曝一下,把目前正在用的系统拿来请大家批评指教一下. ================ ...
- Docker 简单部署 ElasticSearch
https://www.cnblogs.com/jianxuanbing/p/9410800.html
- idea本地调试spark，hive，kafka
https://note.youdao.com/share/?id=753c443aa4a665679d8d00c9c50363b0&type=note#/
- Python各种图像库的图像的基本读写方式
目前主流的图像库有几下几种: 1. OpenCV 2. PIL(Pillow) 3. matplotlib.image 4. skimage 5. scipy. ...
- win10 右键添加“在此打开powershell”
计算机\HKEY_CLASSES_ROOT\Directory\Background\shell\ 上图中的字符串,直接去下图中的位置复制过来就好
- 殊途同归 - Church-Rosser and Consistency of Evaluation
在"解释语言的语言"中提到,设计一个新的语言,仅仅是使用meta-language给出其描述是不够的,我们还需要去验证一些性质. 考虑一下我们在"解释语言 ...
- <抽象工厂>比<工厂方法>多了啥
前言:仅当复习讨论,写得不好,多多指教! 上一篇文章<比多了啥>介绍了简单工厂模式和工厂方法模式.本篇文章则讲最后一个工厂----抽象工厂.如果对工厂方法比较模糊的,可以返回上一篇文章复习 ...