使用localResizeIMG插件上传图片到七牛云返回链接通过PHP进行保存

1.基本配置

<!--图片上传插件-->
<script 

type="text/javascript"

/exts

/jquery.min.js?v=2.1.4"></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);}}