多张图片上传并预览

/*引入js*/
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

<div class="img_file">
<input type="file" name="image" id="select_btn" multiple="multiple" title="点击选择图片"/>
<div class="image_box">
</div>
</div>

<script>
$(function () {
//图片预览
$("#select_btn").bind('change', function () {
var files = $(this);
var file = files[0].files;
if (typeof file == 'undefined') {
alert('您的浏览器版本过低，请更新至最新版本');
return false;
}
var file_length = file.length;
for (var i = 0; i < file_length; i++) {
send_xhr(file[i]);
}
return false;
});
});

//上传图片
function send_xhr(file) {
var formData = new FormData();
formData.append('file', file);
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr == null) {
alert("您的浏览器不支持“XMLHTTP请求”，请更换其他浏览器试试。");
return false;
}
xhr.open("POST", "{:U('TimeGoods/uploadImage')}", true);
xhr.onload = function () {
if (xhr.status === 200) {
var obj = eval('(' + xhr.responseText + ')');
if (obj.status == 0) {
alert(obj.info);
} else {
add_img(obj.info);
}
} else {
alert('上传失败!');

aa79
}
};
xhr.send(formData);
return false;
}

//上传图片end
function init_btn() {
//划过显示删除按钮
$(".image_box>div").hover(function () {
$(this).find('.image_del').fadeIn();
}, function () {
$(this).find('.image_del').fadeOut();
});
//划过显示删除按钮end
//删除某张图
$(".image_del").bind('click', function () {
$(this).parent('div').remove();
});
//删除某张图end
}

//追加图片
function add_img(img_path) {
var html = '<div>';
html += '<div class="image_del">del</div>';
html += '<input type="hidden" name="images[]" value="' + img_path + '" />';
html += '<img src="' + img_path + '" />';
html += '</div>';
$(".image_box").append(html);
init_btn();
}
</script>