博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax上传图片的本质
阅读量:4603 次
发布时间:2019-06-09

本文共 2862 字,大约阅读时间需要 9 分钟。

422101-20160305165612143-915602815.png

1.图片上传到服务器。

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

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

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

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

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

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

  • 点击按钮
  • 上传表单
  • 触发事件
$("#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 '
'; }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}删除成功";            }        }    }

转载于:https://www.cnblogs.com/jiqing9006/p/5245205.html

你可能感兴趣的文章
Python2 unichr() 函数
查看>>
Python 字典 copy()方法
查看>>
Minimum Path Sum
查看>>
Remove Duplicates from Sorted Array II
查看>>
常量指针和指针常量巧妙记忆方法[转]
查看>>
python-haproxy作业讲解视频总结
查看>>
批处理文件脚本总结
查看>>
快速排序C++代码
查看>>
mui搜索框 搜索点击事件
查看>>
bzoj 5289: [Hnoi2018]排列
查看>>
joomla处境堪忧
查看>>
Jquery-AJAX
查看>>
A == B ?
查看>>
洛谷P3763 [Tjoi2017]DNA 【后缀数组】
查看>>
UVa 442 Matrix Chain Multiplication(矩阵链,模拟栈)
查看>>
多种方法求解八数码问题
查看>>
spring mvc ModelAndView向前台传值
查看>>
(黑客游戏)HackTheGame1.21 过关攻略
查看>>
Transparency Tutorial with C# - Part 2
查看>>
android 文件上传
查看>>