Html:
<div> 图片： <div> <input onchange="FirstImg()" name="firstImg" style="opacity:0;position:absolute" type="file" id="FirstfileImg" multiple=""> <div position:absolute=""> <span> 点击这里上传图片</span> </div> </div> </div> <fieldset style="100%;"> <!-- <legend>图片预览</legend> --> <div style="position: relative;" id="ccc"> </div> </fieldset>
Js:
<script> jQuery.DuoImgsYulan = function(file, id) { for (var i = 0; i < 3; i++) { if (!/image/w+/.test(file[i].type)) { alert("请选择图片文件"); return false; } if (file[i].size > 2048 * 1024) { alert("图片不能大于2MB"); continue; } var img; console.log(document.getElementById("fileImg")); console.log(file[i]); console.log("file-size=" + file[i].size); var reader = new FileReader(); reader.onloadstart = function(e) { console.log("开始读取...."); } reader.onprogress = function(e) { console.log("正在读取中...."); } reader.onabort = function(e) { console.log("中断读取...."); } reader.onerror = function(e) { console.log("读取异常...."); } reader.onload = function(e) { console.log("成功读取...."); var div = document.createElement("div"); //外层 div div.setAttribute("style", "position:relative;90px;height:90px;float:left;z-index:2;92px;margin-left:8px;"); var del = document.createElement("div"); //删除按钮div del.setAttribute("style", "position: absolute; bottom: 4px; right: 0px; z-index: 99; 19px; height:18px;border-radius:50%;") var delicon = document.createElement("img"); delicon.setAttribute("src", "http://www.jq22.com/tp/f26c324f-24db-4f08-91d6-f7ffc9ca1516.png"); delicon.setAttribute("title", "删除"); delicon.setAttribute("style", "cursor:pointer; 20px; height:20px"); del.onclick = function() { this.parentNode.parentNode.removeChild(this.parentElement); ClearfirtsImg(); }; del.appendChild(delicon); div.appendChild(del); var imgs = document.createElement("img"); //上传的图片 var input = document.createElement("input"); //上传的图片 input.setAttribute("name", "imgs[]"); input.setAttribute("value", e.target.result); input.setAttribute("style", 'display:none'); imgs.setAttribute("name", "loadimgs[]"); imgs.setAttribute("src", e.target.result); imgs.setAttribute("width", 90); if (document.getElementById(id).childNodes.length > 5) { document.getElementById(id).removeChild(document.getElementById(id).firstChild); } div.appendChild(imgs) div.appendChild(input) document.getElementById(id).appendChild(div); } reader.readAsDataURL(file[i]); } } function FirstImg() { $.DuoImgsYulan(document.getElementById("FirstfileImg").files, "ccc"); } function ClearfirtsImg() { var file = $("#FirstfileImg") file.after(file.clone().val("")); file.remove(); } </script>
ajax:
$('#submit').click(function(){
var formData = new FormData($( "#form" )[0]);
var url = url;
$.ajax({
type:'post',
url:url,
data:formData,
cache: false,
contentType: false,
processData: false,
success:function(data){
// if(data.status==1){
// success(data);
// }else{
// error(data);
// }
}
});
});
源码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片上传前预览-jq22.com</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style> </style> </head> <body> <div style="padding: 20px"> <input onchange="FirstImg()" name="firstImg" style="opacity:0;position:absolute" type="file" id="FirstfileImg" multiple=""> <div position:absolute=""> <span> 点击这里上传图片</span> </div> </div> <fieldset style="1200px;"> <legend>图片预览</legend> <div style="position: relative;" id="ccc"> </div> </fieldset> <script> jQuery.DuoImgsYulan = function(file, id) { for (var i = 0; i < 3; i++) { if (!/image/w+/.test(file[i].type)) { alert("请选择图片文件"); return false; } if (file[i].size > 2048 * 1024) { alert("图片不能大于2MB"); continue; } var img; console.log(document.getElementById("fileImg")); console.log(file[i]); console.log("file-size=" + file[i].size); var reader = new FileReader(); reader.onloadstart = function(e) { console.log("开始读取...."); } reader.onprogress = function(e) { console.log("正在读取中...."); } reader.onabort = function(e) { console.log("中断读取...."); } reader.onerror = function(e) { console.log("读取异常...."); } reader.onload = function(e) { console.log("成功读取...."); var div = document.createElement("div"); //外层 div div.setAttribute("style", "position:relative;inherit;height:inherit;float:left;z-index:2;150px;margin-left:8px;margin-right:8px;"); var del = document.createElement("div"); //删除按钮div del.setAttribute("style", "position: absolute; bottom: 4px; right: 0px; z-index: 99; 30px; height:30px;border-radius:50%;") var delicon = document.createElement("img"); delicon.setAttribute("src", "http://www.jq22.com/tp/f26c324f-24db-4f08-91d6-f7ffc9ca1516.png"); delicon.setAttribute("title", "删除"); delicon.setAttribute("style", "cursor:pointer; 30px; height:30px"); del.onclick = function() { this.parentNode.parentNode.removeChild(this.parentElement); ClearfirtsImg(); }; del.appendChild(delicon); div.appendChild(del); var imgs = document.createElement("img"); //上传的图片 imgs.setAttribute("name", "loadimgs"); imgs.setAttribute("src", e.target.result); imgs.setAttribute("width", 150); if (document.getElementById(id).childNodes.length > 4) { document.getElementById(id).removeChild(document.getElementById(id).firstChild); } div.appendChild(imgs) document.getElementById(id).appendChild(div); } reader.readAsDataURL(file[i]); } } function FirstImg() { $.DuoImgsYulan(document.getElementById("FirstfileImg").files, "ccc"); } function ClearfirtsImg() { var file = $("#FirstfileImg") file.after(file.clone().val("")); file.remove(); } </script> </body> </html>