html5多图上传预览

Html

Css

// 请在该段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('上传失败');
// 			}
// 		} )
// }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

html5多图上传预览



代码描述：html5多图上传预览

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

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

破晓天明

相关代码

html5多图上传预览

最新