html前端：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>上传图片</title>
<script type="text/javascript">
$(document).ready(function() {
var src ='';
var img ='';
var flag = 0;
$(".btn-save").click(function() {
if (flag == 0) {
$("input[name='img']").val(img);
$.ajax({
type: 'post',
url: "{:U('Public/add')}",
dataType: "json",
data: $("form").serialize(),
success: function(data) {
if (data.code == 1)
flag = 1;
layer.msg(data.msg);
}
});
}
else
layer.msg("请勿重复提交");
});
$("#uploaderInput").on("change",function(e) {
var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>';
var url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
if (url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
$("#uploaderFiles").html($(tmpl.replace('#url#', src)));
if(window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
$.ajax({
type: 'post',
url: "{:U('Public/upload')}",
dataType: "json",
data: "img=" + e.target.result,
success: function(data) {
img = data.msg;
}
});
}
}
else {
alert("Not supported by your browser!");
}
}
})
});
</script>
</head>
<body>
<div class="wrapper">
<div class="tabbar js_show scroller">
<div class="page__bd">
<form action="" method="post" name="myform" enctype="multipart/form-data">
<input type="hidden" name="img" value="">
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">上传图片</label></div>
<div class="weui-cell__bd">
<ul id="uploaderFiles" class="weui-uploader__files"></ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
</div>
</div>
</div>
<div class="weui-cell"></div>
<div class="weui-btn-area"><a class="weui-btn weui-btn_primary btn-save" href="javascript:void(0)" id="showTooltips"> 提 交 </a></div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
php后端：
function upload() {
$img = $_POST ['img'];
list ( $type, $data ) = explode ( ',', $img );
if (strstr ( $type, 'image/jpeg' ) !== '') {
$ext = '.jpg';
} elseif (strstr ( $type, 'image/gif' ) !== '') {
$ext = '.gif';
} elseif (strstr ( $type, 'image/png' ) !== '') {
$ext = '.png';
}
$dirname = date ( 'Ymd' );
if (! is_dir ( WEB_ROOT . '/../attached/' . $dirname )) {
mkdir ( WEB_ROOT . '/../attached/' . $dirname );
}
$filename = $dirname . '/' . time () . rand ( 000, 999 ) . $ext;
$data = str_replace ( ' ', '+', $data );
$res = file_put_contents ( WEB_ROOT . '/../attached/' . $filename, base64_decode ( $data, true ) );
echo json_encode ( array ('code' => 0,'msg' => $filename ) );
}
发表评论