ajax上传图片的本质

1.图片上传到服务器。

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

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

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

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

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

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

点击按钮

<div id="up_status" style="display:none"><img src="{sh::PUB}/img/loader.gif" alt="uploading"/></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);">
                <img src="'.PUB.'img/delete.png" class="carousel-container-del">
                <input name="goodsimg[]" value="'.$path.$image_name.'" type="hidden">
                <img src="'.$path.$image_name.'"  class="preview">
                </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){}});}

// 删除图片，避免造成空间不足publicfunction deleteImg() if(IS_AJAX)$src$this('src');if(unlink($src))echo"文件{$src}删除失败";elseecho"文件{$src}删除成功";

ajax上传图片的本质相关推荐

vue用form上传图片_vuejs使用FormData，ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...
C#也能PS图片，还能为网站Ajax上传图片同时生成微缩图(附Demo)
C#也能PS图片,还能为网站Ajax上传图片同时生成微缩图(附Demo) 本文旨在与各位朋友们分享我是如何在项目中用C# "ps图片" 为网站生成同比例微缩图的解决方案.如有不足之 ...
移动端压缩并ajax上传图片解决方案
移动端压缩并ajax上传图片解决方案参考文章: (1)移动端压缩并ajax上传图片解决方案 (2)https://www.cnblogs.com/norm/p/6188318.html 备忘一下.
原生ajax传值php,原生ajax上传图片，php后台处理总结
原生ajax上传图片,php后台处理总结这篇文章发布于 2018/10/03,归类于后端数据库等标签: 原生ajax上传图片,php后台处理图片上传开始做图片上传,发现之前的处理方式基本忘光了 ...
ssm 上传图片到mysql_MySQL+SSM+Ajax上传图片问题的分析（图）
本文主要介绍了MySQL+SSM+Ajax上传图片问题.具有很好的参考价值.下面跟着小编一起来看下吧第一次写上传图片的代码,碰到很多问题.昨天做了整整一天,终于在晚上的时候成功了.大声欢呼. 但是, ...
ajax上传图片java6,java ajax上传图片返回json数
java ajax上传图片返回json数 [2021-02-10 00:12:56] 简介: 解决java的ajax提交返回值中文乱码的方法:1.在RequestMapping的并发配置中加代码[p ...
ajax图片预览,Ajax 上传图片并预览的简单实现
1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上传 | cookie file: desc: function upload() { $.ajaxFileUpload({ ...
thinkphp5通过ajax上传图片并预览
thinkphp5通过ajax上传图片并预览一.具体需求如图所术: 二.html代码: 三.js代码四.控制器php代码: 一.具体需求如图所术: 二.html代码: <form class ...
php ajax多图上传预览,Ajax上传图片及先预览功能的实现方法
最近有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果, ...

ajax上传图片的本质

ajax上传图片的本质相关推荐

最新文章

热门文章