Html

<form id="files">
    <input type="file" id="file" multiple="" name="file" onchange="img()">
    <!-- 单图去掉 multiple -->
    <div id="img">

    </div>
</form>

Js

// 请在该段js代码请引用jq,否则代码无效
function img() {
    var file = document.getElementById("file").files; //获取input file的文件对象
    for (var i = 0; i < file.length; i++) { //多图,单图不用for
        var url = URL.createObjectURL(file[i]); //获取所选文件的临时地址
        $("#img").append('<img src="' + url + '" alt="" widht="100px" height="200px">'); //单图用html,多图用append
    } // 图片预览就是这么简单!

    // files(file)//多图异步上传方法
}

// 多图异步上传
// function files(file){
// var file = Array.from(file);//将file文件转成数组类型
// var files = new FormData($("#files")[0]);//获取form对象
// for ( var i = 0; i < file.length; i++ ) {
// 	files.append( 'imgs[]',file[i]);//把文件属性存到数组
// 	// PHP后台用$_FILES['img']接收  
// }
// $.ajax( {
// 			url: '123.php',//你的保存文件脚本的路径
// 			type: 'POST',
// 			data:files,
// 			contentType: false, //不设置内容类型
// 			processData: false, //不处理数据
// 			cache:"false",
// 			async:"true",
// 			dataType:"json",
// 			success: function (data) {
// 				alert('上传成功');
// 				console.log(data)
// 			},
// 			error: function () {
// 				alert('上传失败');
// 			}
// 		} )
// }

本段代码是html5多图上传预览，js代码中有ajax多图上传代码，只需取消注释代码就行

原文链接：HelloWeb前端网 » html5多图上传预览 » 感谢您的浏览，希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群： 196291215 共同交流并结识同行，在这里说出您的收获与感想或有什么不同的观点，我们期待您的留言，分享，让我们一起进步！