<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input-img</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style>
img {
100px;
height: auto;
}
</style>
</head>
<body>
<div class="imgBox"></div>
<!-- accept： 规定文件类型
multiple: 允许多文件上传 -->
<input type="file" name="file" id="file" class="file" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple>
</body>
<script>
$(function () {
$('#file').change(function () {
var imgArr = []; //获取的图片地址
var fileList = $(this)[0].files; //或获取的图片文件
console.log(fileList);
var Length = fileList.length;
for ( var i = 0; i < Length; i++ ) {
var imgUrl = window.URL.createObjectURL(fileList[i]); //获取图片地址
imgArr.push(imgUrl);
console.log(imgArr);
var $img = $("<img class='img'>");
$('.imgBox').append($img);
$img.attr('src', imgArr[i]);
}
});
})
</script>
</html>