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将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...
随机推荐
- java面向对象总结(一)
1. 对象的概念及面向对象的三个基本特征 面向对象的三大核心特性 面向对象开发模式更有利于人们开拓思维,在具体的开发过程中便于程序的划分,方便程序员分工合作,提高开发效率.面向对象程序设计有以下优点. ...
- javascript----数组的方法
1---join() //1----->join()方法将数组中所有元素都转化<<字符串>> //并连接在一起 //array.join()方法是string.split ...
- rsync+sersync实现代码同步
APP02安装 rsync服务端 yum install rsync vim /etc/rsyncd.conf pid file=/var/rsynclog/rsyncd.pid log file=/ ...
- [C++ Primer Plus] 第9章、内存模型和名称空间(一)程序清单
程序清单9.9(静态存储连续性.无链接性) #include<iostream> using namespace std; ; void strcount(const char *str) ...
- 对Activity的DecorView的包装(二)
看了下公司的系统代码对于根布局decor_layout.xml的修改, 有所获. 前些时候才开始做系统开发的时候, 总想改改系统的源码, 至于原因: 人总是想装装, 在踩过几个别人修改的坑后, 还是觉 ...
- 软件测试3gkd
一.单元测试的任务 单元测试主要是对软件的基本组成单元进行测试,且所测试单元与程序的其他部分在测试中相隔离. 在单元测试中,我们需要对与程序构建中的单位测试以保证其可靠运行与代码规范. 单元测 ...
- CF786B Legacy
思路 线段树优化建图 基本思想就是要把一个区间连边拆成log个节点连边, 然后一颗入线段树,一颗出线段树,出线段树都由子节点向父节点连边(可以从子区间出发),入线段树从父节点向子节点连边(可以到达子区 ...
- RFS--RequestLibrary
一.requestlibrary关键字1.1create session:创建一个session回话.Create Session: 创建一个session,连接某个服务器.Create Ntlm S ...
- ssh整合,hibernate查询表数量count以及批处理添加
String sql = "select count(*) from LogEntity as log "; Long count = (Long)getHibernateTemp ...
- Linux操作系统的VI命令
Linux操作系统的VI命令 VI是Linux系统的一个文本编辑器,该编辑器可以通过使用VI命令来操作,从而完成对文本的编辑.熟练掌握一些常用的VI命令,可以大大简化编辑操作并提高操作Linux文本的 ...