php 接收多图片base64

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"); //外层 divdiv.setAttribute("style", "position:relative;width:90px;height:90px;float:left;z-index:2;width:92px;margin-left:8px;");var del = document.createElement("div"); //删除按钮divdel.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);// }
            }});});

源码:

<!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="width: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;width:inherit;height:inherit;float:left;z-index:2;width: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; width: 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;width: 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>

转载于:https://www.cnblogs.com/zjj1990/p/8335687.html

php 接收多图片base64相关推荐

图片Base64编码
图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 编码.标题略大,不过只是希望通过一些浅显的论述 ...
基于vue+springboot，实现图片base64转码保存到数据库
基于vue+springboot,实现图片base64转码保存到数据库背景:在项目中遇到一个新增.编辑的场景.新增一个车辆信息,并且附有车辆照片和关联的设备照片,照片转码成base64保存到mysq ...
redis java 存储图片_Redis 存储图片 [base64/url/path]vs[object]
一.base64图片编解码基本流程:从网络获取下载一张图片.然后base64编码,再base64解码,存到本地E盘根文件夹下. import java.awt.image.BufferedImage ...
MD文件图片base64自动编码
看工具链接请直接将文章拉到最后- 概述不知道你在使用markdown写文章的时候有没有遇到过这样的烦恼, 文件写完了, 想将写完的文章粘贴到博客的时候, 你满心欢喜的复制粘贴, 但是发现图片根本复制 ...
java converttobase64_Java 工具箱 | 图片-Base64 互转
前言最近真的被图片上传的功能给烦恼了.在web的项目中,我们经常会有上传图片的业务场景,最典型的是上传头像.为了解决头像上可以有如下的实现: 使用 multipart/form-data 上传用户信 ...
itextpdf 实现html转pdf中中文及图片base64的解决方法
为什么80%的码农都做不了架构师?>>> itextpdf 实现html转pdf中中文及图片base64的解决方法: 1. 中文解决方案: 实现FontProvider接口: ...
php网址图片怎么转based4,Ionic4 Base64 转化成图片插件-Base64 转化成图片Base64 To Gallery - Ionic Native...
This plugin allows you to save base64 data as a png image into the device Ionic Base64 转化成图片Base64 T ...
图片base64转存本地url
//图片base64转存本地url function base64_to_local_url(){$base64 = "data:image/jpeg;base64,/9j/4AAQSkZJ ...
图片Base64编码图片Base64在线转换
在线工具https://oktools.net 图片Base64编码https://oktools.net/image2base64 JSON格式化https://oktools.net/json U ...

php 接收多图片base64

php 接收多图片base64相关推荐

最新文章

热门文章