HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>showImages</title>
<link rel="stylesheet" type="text/css" href="css/upimg.css">
</head>
<body>
<input type="text" name="" id="name" placeholder="公司名">
<input type="text" name="" id="link" placeholder="经理名">
<div class="container">
<label>请选择一个图像文件：</label>
<button id="select">(重新)选择图片</button>
<button id="add">(追加)图片</button>
<!--用input标签并选择type=file，记得带上multiple，不然就只能单选图片了-->
<input type="file" id="file_input" multiple/>
<button id="submit">提交</button>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!-- <script type="text/javascript" src="js/upimg.js"></script> -->
<script type="text/javascript" src="js/upimg-jq.js"></script>
<!-- <script type="text/javascript" src="js/upimg-load-jq.js"></script> -->
</html>Css：
.float{
float:left;
width : 200px;
height: 200px;
overflow: hidden;
border: 1px solid #CCCCCC;
border-radius: 10px;
padding: 5px;
margin: 5px;
}
img{
position: relative;
}
.result{
width: 200px;
height: 200px;
text-align: center;
box-sizing: border-box;
}
#file_input{
display: none;
}
.delete{
width: 200px;
height:200px;
position: absolute;
text-align: center;
line-height: 200px;
z-index: 10;
font-size: 30px;
background-color: rgba(255,255,255,0.8);
color: #777;
opacity: 0;
transition-duration: :0.7s;
-webkit-transition-duration: 0.7s;
}
.delete:hover{
cursor: pointer;
opacity: 1;
} Js：（选择其中一种即可，并注意记得在html中引入对应的Js）
(1)upimg-jq.js
/*upimg-jq.js*/
window.onload = function(){
//document.getElementById()返回的是DOM对象，而$()返回的是jQuery对象;
//document.getElementById("file_input") == $("#file_input")[0] == $("#file_input").get(0);
var input = document.getElementById("file_input");
var oSelect = document.getElementById("select");
var oAdd = document.getElementById("add");
var oSubmit = document.getElementById("submit");
var oInput = document.getElementById("file_input");
var dataArr = []; // 储存所选图片的结果(文件名和base64数据)
var fd;
var result;
//判断是否支持FileReader
if(typeof FileReader==='undefined'){
alert("抱歉，你的浏览器不支持 FileReader");
input.setAttribute('disabled','disabled'); //添加属性，禁用input
}else{
//添加监听事件
input.addEventListener('change',readFile,false); //默认值是false，冒泡传递;当值为true，捕获传递
}
//选择图片及预览--begin
function readFile(){
fd = new FormData(); //FormData方式发送请求
var iLen = this.files.length; //获取图片数量
var index = 0; //为图片盒子设置索引值
//循环渲染图片--begin
for(var i=0;i<iLen;i++){
//判断上传文件格式--begin
if (!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)){
return alert("上传的图片格式不正确，请重新选择");
}
//判断上传文件格式--end
//创建FileReader()对象--begin
var reader = new FileReader();
reader.index = i;
fd.append(i,this.files[i]); //可以通过fd.get(i)获取FormData()对应的值;
reader.readAsDataURL(this.files[i]); //转成base64，并存在reader.result里
reader.fileName = this.files[i].name;
reader.onload = function(e){
//设置图片信息对象
var imgMsg = {
name : this.fileName,//获取文件名
base64 : this.result //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里
}
//将图片信息对象存到数据数组中
dataArr.push(imgMsg);
//创建显示图片--begin
var imghtml = "";
imghtml += '<div id="imgbox" class="float" index='+index+'>';
imghtml += ' <div class="delete">';
imghtml += ' delete';
imghtml += ' </div>';
imghtml += ' <div class="result">';
imghtml += ' <img src="'+this.result+'" alt=""/>';
imghtml += ' </div>';
imghtml += '</div>';
$('body').append(imghtml);
//创建显示图片--end
//设置图片大小--begin
var RePicWidth = 200; //这里修改为您想显示的宽度值
var nowHeight = 0;
var TrueWidth = $("#imgbox .result img").outerWidth(); //图片实际宽度
var TrueHeight = $("#imgbox .result img").outerHeight(); //图片实际高度
$("#imgbox .result").css("display","block");
if(TrueWidth>TrueHeight){
//宽大于高
var reWidth = RePicWidth;
$("#imgbox .result img").css("width",reWidth);
//垂直居中
nowHeight = TrueHeight * (reWidth/TrueWidth); //将图片修改后的高度返回，供垂直居中用
}else{
//宽小于高
var reHeight = RePicWidth;
$("#imgbox .result img").css("height",reHeight);
}
if(nowHeight != 0 || nowHeight != "0"){
var paddingTop = ($("#imgbox .result").outerHeight() - nowHeight)/2 + 'px';
$("#imgbox .result").css("paddingTop",paddingTop);
}
//设置图片大小--end
index++; //设置图片索引
}
//创建FileReader()对象--end
}
//循环渲染图片--end
}
//选择图片及预览--end
//点击删除图片--begin
$(document).on('click',"#imgbox .delete",function(){
var _this = $(this);
var _parent = _this.parent();
var _del_aim = _parent.attr("index");
_parent.remove(); //移除图片盒子
dataArr.splice(_del_aim,1); //删除保存的图片数据
})
//点击删除图片--end
//点击重新选择图片--begin
$(document).on("click","#select",function(){
$("#file_input").val(""); // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
$('.float').remove(); //清空已选图片
dataArr = []; //清空保存的图片数据
index = 0; //重置图片盒子索引
$("#file_input").click(); //触发input点击事件
})
//点击重新选择图片--end
//点击添加图片--begin
$(document).on("click","#add",function(){
$("#file_input").val(""); // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
$("#file_input").click(); //触发input点击事件
})
//点击添加图片--end
//点击提交按钮--begin
$(document).on("click","#submit",function(){
if(!dataArr.length){
return alert('请先选择文件');
}
send(); //执行提交数据函数
})
//点击提交按钮--end
/*
用ajax发送fd参数时要告诉jQuery不要去处理发送的数据，
不要去设置Content-Type请求头才可以发送成功，否则会报“Illegal invocation”的错误，
也就是非法调用，所以要加上“processData: false,contentType: false,”
* */
function send(){
var submitArr = [];
for (var i = 0; i < dataArr.length; i++) {
if (dataArr[i]) {
submitArr.push(dataArr[i]);
}
}
//console.log('提交的数据：'+JSON.stringify(submitArr));
$.ajax({
url : 'http://oootb.com:8080/gtyy_ydd_1/UploadServlet',
type : 'post',
data : JSON.stringify(submitArr),
dataType: 'json',
//processData: false, 用FormData传fd时需有这两项
//contentType: false,
success : function(data){
console.log('返回的数据：'+JSON.stringify(data))
}
})
}
// 传输数据--end
} (2)upimg-load-jq.js
/*upimg-load-jq.js*/
$(function(){
var index = 0; //初始化索引对象
var file_num = ""; //初始化选择文件数量
var obj = new FormData(); //创建FormData()对象
//判断是否支持FileReader
if(typeof FileReader==='undefined'){
alert("抱歉，你的浏览器不支持 FileReader");
$("#file_input").attr('disabled','disabled'); //添加disabled属性，禁用input
}else{
//添加监听事件
$("#file_input").on('change', function(){
control_img(); //执行图片处理
})
}
//获取操作图片--begin
function control_img(){
//var tel = "123456"; //设置修改文件名参数
var fileObj = $("#file_input")[0].files; // 获取文件对象;
file_num = fileObj.length; //设置文件数量
for(var i = 0; i < fileObj.length; i++){
var fileName = "file_" + i;
//判断图片上传格式--begin
var file_type = fileObj[i].type; //获取上传文件类型
var type_start = file_type.lastIndexOf('/'); //拆选文件类型下标
var type = file_type.substring(type_start, file_type.length).toUpperCase(); //得到文件类型后缀
if(type !== '/PNG' && type !== '/JPG' && type !== '/JPEG' && type !== '/GIF'){ //判断格式
return alert("上传的图片格式不正确，请重新选择");
}
//判断图片上传格式--end
/*var file_obj = new File([fileObj[i]],tel+fileObj[i].name,{type:fileObj[i].type}); //修改文件名称
obj.append(i, file_obj); //存入FormData()对象，作为上传数据*/
obj.append(i, fileObj[i],fileName); //存入FormData()对象，作为上传数据,第三个参数fileName是文件名
//创建一个文件阅读器--begin
var reader = new FileReader();
reader.readAsDataURL(fileObj[i]); //转成base64，并存在reader.result里
reader.fileName = fileObj[i].name;
//文件装载后将其显示在图片预览里
reader.onload = function () {
//渲染图片--begin
var imghtml = "";
imghtml += '<div id="imgbox" class="float" index='+index+'>';
imghtml += ' <div class="delete">';
imghtml += ' delete';
imghtml += ' </div>';
imghtml += ' <div class="result" id="img_'+index+'">';
imghtml += ' <img src="'+this.result+'" alt=""/>';
imghtml += ' </div>';
imghtml += '</div>';
$('body').append(imghtml);
//渲染图片--end
//设置图片大小--begin
var RePicWidth = 200; //这里修改为您想显示的宽度值
var nowHeight = 0;
var img_aim = $("#imgbox #img_"+index+" img");
img_aim.load(function(){ //图片加载完执行
var TrueWidth = img_aim.outerWidth(); //图片实际宽度
var TrueHeight = img_aim.outerHeight(); //图片实际高度
$("#imgbox .result").css("display","block");
if(TrueWidth>TrueHeight){
//宽大于高
var reWidth = RePicWidth;
img_aim.css("width",reWidth);
//垂直居中
nowHeight = TrueHeight * (reWidth/TrueWidth); //将图片修改后的高度返回，供垂直居中用
}else{
//宽小于高
var reHeight = RePicWidth;
img_aim.css("height",reHeight);
}
if(nowHeight != 0 || nowHeight != "0"){
var paddingTop = ($("#imgbox .result").outerHeight() - nowHeight)/2 + 'px';
$("#imgbox .result").css("paddingTop",paddingTop);
}
});
//设置图片大小--end
index++; //设置图片索引
}
//创建一个文件阅读器--end
}
}
//获取操作图片--end
//点击(重新)选择图片--begin
$(document).on("click","#select",function(){
$("#file_input").val(""); // 先将input值清空，否则选择图片与上次相同时change事件不会触发
$('.float').remove(); //清空已选图片
index = 0; //重置图片盒子索引
for(var j = 0; j < file_num; j++){ //遍历删除全部数据
obj.delete(j);
}
$("#file_input").click(); //触发input点击事件
})
//点击(重新)选择图片--end
//点击添加图片--begin
$(document).on("click","#add",function(){
$("#file_input").val(""); // 先将input值清空，否则选择图片与上次相同时change事件不会触发
$("#file_input").click(); //触发input点击事件
})
//点击添加图片-end
//点击提交按钮--begin
$(document).on("click","#submit",function(){
if(file_num == ""){ //判断文件是否为空
return alert('请先选择文件');
}
send(); //执行提交数据函数
})
//点击提交按钮--end
//点击删除图片--begin
$(document).on('click',"#imgbox .delete",function(){
var _this = $(this);
var _parent = _this.parent(); //获取图片盒子
var _del_aim = _parent.attr("index"); //获取对应图片索引
_parent.remove(); //移除图片盒子
obj.delete(_del_aim); //删除保存的图片数据
})
//点击删除图片--end
function send(){
/*
用ajax发送fd参数时要告诉jQuery不要去处理发送的数据，
不要去设置Content-Type请求头才可以发送成功，否则会报“Illegal invocation”的错误，
也就是非法调用，所以要加上“processData: false,contentType: false,”
* */
var name = $("#name").val();
var link = $("#link").val();
var FileController = 'http://192.171.10.33:8080/AAA/shangchuan'; //接收上传文件的后台地址
$.ajax({
url : FileController,
type : 'post',
data : obj,
processData: false, //用FormData传fd时需有这两项
contentType: false,
success : function(data){
alert('上传成功');
},
error : function(msg){
alert("上传失败");
}
})
}
})
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
