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" οnclick="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); } }