这篇文章主要介绍了Ajax上传图片的本质的相关资料,需要的朋友可以参考下
<div id="up_status" style="display:none">[站外图片上传中……(2)]</div>
<div id="up_btn" class="carousel-btn">
<span>添加图片</span>
</div>
<div id="carousel-preview"></div>
上传表单
<form id="imageform" class="hidden" method="post" enctype="multipart/form-data" action="{sh::U('Goods/carouselUpload')}">
<input id="carousel-photoimg" type="file" name="photoimg">
</form>
触发事件
$("#up_btn").click(function () {
$("#carousel-photoimg").click();
});
$('#carousel-photoimg').on('change', function(){
var status = $("#up_status");
var btn = $("#up_btn");
$("#imageform").ajaxForm({
target: '#carousel-preview',
beforeSubmit:function(){ // 提交前,用加载的图片显示
status.show();
btn.hide();
},
success:function(){ // 提交后,加载的图片显示
status.hide();
btn.show();
},
error:function(){
status.hide();
btn.show();
} }).submit();
});
后端验证与处理
function carouselUpload() {
$path = "Uploads/Store/goods/".date("Ymd").'/';
if (!file_exists($path)) {
mkdir($path, 0777, true);
}
$extArr = array("jpg", "png", "gif","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(empty($name)){
echo '请选择要上传的图片';
exit;
}
$ext = $this->extend($name);
if(!in_array($ext,$extArr)){
echo '图片格式错误!';
exit;
}
if($size>(2000*1024)){
echo '图片大小不能超过2M';
exit;
}
$image_name = time().rand(100,999).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$image_name)){
echo '<div class="carousel-container" onclick="deleteImg(this);">
[站外图片上传中……(3)]
<input name="goodsimg[]" value="'.$path.$image_name.'" type="hidden">
[站外图片上传中……(4)]
</div>';
}else{
echo '上传出错了!';
}
exit;
}
exit;
}
function extend($file_name){
$extend = pathinfo($file_name);
$extend = strtolower($extend["extension"]);
return $extend;
}
删除图片文件
function deleteImg(obj) {
$(obj).remove();
// ajax 删除图片文件
var src = $(obj).data('src');
$.ajax({
type: "POST",
url: "{sh::U('Goods/deleteImg')}",
data: "src="K3NyYywNCnN1Y2Nlc3M6IGZ1bmN0aW9uKG1zZyl7fQ0KfSk7DQp9DQovLyDliKDpmaTlm77niYfvvIzpgb/lhY3pgKDmiJDnqbrpl7TkuI3otrMNCnB1YmxpYyBmdW5jdGlvbiBkZWxldGVJbWcoKSB7DQppZiAoSVNfQUpBWCkgew0KJHNyYyA9ICR0aGlzLSZndDtfcG9zdCg="src');
if(!unlink($src))
{
echo "文件{$src}删除失败";
}
else
{
echo "文件{$src}删除成功";
}
}
}
以上内容是小编给大家介绍的Ajax上传图片的本质的相关资料,希望对大家以上帮助!
沃梦达教程
本文标题为:Ajax上传图片的本质
猜你喜欢
- 基于CORS实现WebApi Ajax 跨域请求解决方法 2023-02-14
- vue keep-alive 2023-10-08
- JS实现左侧菜单工具栏 2022-08-31
- ajax实现输入提示效果 2023-02-14
- 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库 2022-12-15
- javascript 判断当前浏览器版本并判断ie版本 2023-08-08
- jsPlumb+vue创建字段映射关系 2023-10-08
- layui数据表格以及传数据方式 2022-12-13
- 关于 html:如何从 css 表中删除边距和填充 2022-09-21
- 1 Vue - 简介 2023-10-08