<!--图片上传插件-->
<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);
}
}