Ajax上传图片的本质

 更新时间:2016年03月06日 10:52:22   作者:书虫纪庆  
这篇文章主要介绍了Ajax上传图片的本质的相关资料,需要的朋友可以参考下

1.图片上传到服务器。

2.后台将图片地址传到html页面,以图片形式展现。

3.后天将图片地址加入到input表单中,表单处于隐藏状态。

4.前端删除图片,通过js操作,移除图片与表单数据。

5.图片上传表单,是单独的。不能嵌套在总的表单中。

6.牛逼的图片上传,可以对图片进行处理。压缩,加水印等。

7.点击btn,触发图片点击,图片改变之后,触发图片表单提交。

点击按钮

<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="+src,
success: function(msg){}
});
}
// 删除图片,避免造成空间不足
public function deleteImg() {
if (IS_AJAX) {
$src = $this->_post('src');
if(!unlink($src))
{
echo "文件{$src}删除失败";
}
else
{
echo "文件{$src}删除成功";
}
}
}

以上内容是小编给大家介绍的Ajax上传图片的本质的相关资料,希望对大家以上帮助!

相关文章

  • ajax传递多个参数具体实现

    ajax传递多个参数具体实现

    在使用ajax过程中,传递参数是在所难免的尤其在特殊情况下传递多个参数,下面与大家分享下具体的是实现方法,感兴趣的朋友可以参考下哈
    2013-05-05
  • ajax快速解决参数过长无法提交成功的问题

    ajax快速解决参数过长无法提交成功的问题

    下面小编就为大家带来一篇ajax快速解决参数过长无法提交成功的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • 关于ajax的使用方法_例题、ajax的数据处理

    关于ajax的使用方法_例题、ajax的数据处理

    下面小编就为大家带来一篇关于ajax的使用方法_例题、ajax的数据处理。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 浅析JSONP解决Ajax跨域访问问题的思路详解

    浅析JSONP解决Ajax跨域访问问题的思路详解

    JSONP是一种使用JSON数据的方式,返回的不是JSON对象,是包含JSON对象的javaScript脚本。接下来通过本文给大家介绍jsonp解决ajax跨域访问问题的思路,非常不错具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-05-05
  • 关于二次封装jquery ajax办法示例详解

    关于二次封装jquery ajax办法示例详解

    Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML,下面这篇文章主要给大家介绍了关于二次封装jquery ajax办法示例,文中通过示例代码介绍的非常详细,需要的朋友们下面来一起看看吧。
    2017-07-07
  • AJAX POST数据中有特殊符号(转义字符)导致数据丢失的解决方法

    AJAX POST数据中有特殊符号(转义字符)导致数据丢失的解决方法

    这篇文章主要介绍了Ajax发送转义字符 、>、<、"接收数据不全问题,需要的朋友可以参考下
    2023-06-06
  • AJAX检测用户名是否存在的方法

    AJAX检测用户名是否存在的方法

    这篇文章主要为大家详细介绍了AJAX检测用户名是否存在,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 利用AJAX开源项目 在网页里播放视频实现方法

    利用AJAX开源项目 在网页里播放视频实现方法

    下载videobox 1.1.zip把它解压到asp.net项目的目录下,并用“Add New Item”新建一个Html文件用以播放视频。
    2008-11-11
  • 使用Ajax实现进度条的绘制

    使用Ajax实现进度条的绘制

    这篇文章主要介绍了如何利用Ajax绘制进度条,文中的示例代码讲解详细,对我们的学习或工作有一定的帮助,感兴趣的小伙伴可以了解一下
    2022-04-04
  • Ajax实现文件上传功能(Spring MVC)

    Ajax实现文件上传功能(Spring MVC)

    这篇文章主要为大家详细介绍了Ajax实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论