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="width: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;width:90px;height:90px;float:left;z-index:2;width:92px;margin-left:8px;"); ???????????var del = document.createElement("div"); //删除按钮div ???????????del.setAttribute("style", "position: absolute; bottom: 4px; right: 0px; z-index: 99; width: 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;width: 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); ???????????????// } ???????????} ???????}); ???});
php 接收多图片base64
原文地址:https://www.cnblogs.com/zjj1990/p/8335687.html