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 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!