1.基本配置
<!--图片上传插件--> <script
type="text/javascript"src= "
/exts
/jquery.min.js?v=2.1.4"></script>
< script type= "text/javascript" src= "/exts/jquery.masonry.min.js?1" ></ script >
<script type="text/javascript" src="/exts/exif.js?1"></script>
<script type="text/javascript" src="/exts/binaryajax.js?1"></script>
<script type="text/vbscript">
Function IEBinary_getByteAt(strBinary, iOffset)
IEBinary_getByteAt = AscB(MidB(strBinary, iOffset + 1, 1))
End Function
Function IEBinary_getBytesAt(strBinary, iOffset, iLength)
Dim aBytes()
ReDim aBytes(iLength - 1)
For i = 0 To iLength - 1
aBytes(i) = IEBinary_getByteAt(strBinary, iOffset + i)
Next
IEBinary_getBytesAt = aBytes
End Function
Function IEBinary_getLength(strBinary)
IEBinary_getLength = LenB(strBinary)
End Function
</script>
<script type="text/javascript" src="/exts/localResizeIMG2.js"></script>
<script type="text/javascript" src="/exts/mobileBUGFix.mini.js"></script>
<!--图片上传插件-->
附百度云插件下载地址 链接: https://pan.baidu.com/s/1dFKY3L3 密码: euzv
2.html
<divclass="img-box">
<ulid="img-box"></ul>
<div class="img upload-box"> <!-- 以下是上传按钮 --> <input type="file" id="upload_image" onclick="shangchuan()" class="file"> </div>
</div>
3.Js代码
<script> function shangchuan() {
var viewImg = $("#img-box"); var imgurl = ''; var imgcount = 0; var num = 0; var num = num-1;
$('#upload_image').localResizeIMG({ success: function (result) { var status = true; if (result.height > 1600) { status = false; alert("照片最大高度不超过1600像素"); } if (viewImg.find("li").length > 4) { status = false; layer.msg('最多上传5张图片'); } if (status) { viewImg.append('<li style="float: left" class="imglist"><span class="pic_time"><span class="p_img"></span><em>50%</em></span></li>'); viewImg.find("li:last-child").html('<img class="img" src="' + result.base64 + '"/><span class="del"><img style="margin-left: -10px;width: 20px;height: 20px" src="/exts/del.png"></span>' +'<input type="hidden" id="file'+ + imgcount + '" name="fileup[]" class="imginput" value="">'); $(".del").on("click",function(){ $(this).parent('li').remove(); }); var box = []; /*上传到七牛云*/ var picBase = result.base64; /*picBase是base64图片带头部的完整编码*/ var qiniu = function putb64(picBase){ /*picUrl用来存储返回来的url*/ var picUrl; /*/!*把头部的data:image/png;base64,去掉。(注意:base64后面的逗号也去掉)*!/*/ picBase=picBase.substring(23); function fileSize(str) { var fileSize; if(str.indexOf('=')>0) { var indexOf=str.indexOf('='); str=str.substring(0,indexOf);//把末尾的’=‘号去掉 } fileSize=parseInt(str.length-(str.length/8)*2); return fileSize; } /*把字符串转换成json*/ function strToJson(str) { var json = eval('(' + str + ')'); return json; } var url = "http://upload-z2.qiniu.com/putb64/"+fileSize(picBase); var xhr = new XMLHttpRequest(); xhr.onreadystatechange=function() { if (xhr.readyState==4){ var keyText=xhr.responseText; /*返回的key是字符串,需要装换成json*/ keyText=strToJson(keyText); /*例如 http://ojvh6i96g.bkt.clouddn.com/ ,keyText.key 是返回的图片文件名*/ picUrl="七牛云空间网址"+keyText.key; var id ='#file'+num; $(id).val(picUrl); } } xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/octet-stream"); xhr.setRequestHeader("Authorization", "UpToken Uptoken"); /*此处uptoken可在 http://pchou.qiniudn.com/qiniutool/uptoken.html 进行设置 */ xhr.send(picBase); } imgcount++; num++; /*通过base64编码字符流计算文件流大小函数*/ qiniu(picBase); } } }); } </script> <!--图片上传-->
4.Js取值
if(0 == $("#img-box").find("li").length){ Page.alert('请选择图片'); return false; } var inputObj = $(".imginput"); var imgStr = ""; $.each(inputObj,function(k,v){ imgStr += v.defaultValue+","; }); $.post('{:url("")}', { img:imgStr, }, function(data){ if(data.status==1) { layer.msg(data.message); setTimeout(function () { window.location.href = ‘’ }, 2000); }else{ layer.msg(data.message); } },'json');
5.PHP保存
function insert_img($img){ $imgArr = $img; $imgArr = explode(',', $imgArr); $imgArr = array_filter($imgArr); //构造二维数组 $imgblank = []; foreach ($imgArr as $v) { $imgs['img']=$v; $imgObj->insert($imgs); } }