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上传图片的本质的相关资料,希望对大家以上帮助!

(0)

相关推荐

  • JQuery+ajax实现批量上传图片(自写)

    在网上搜索了一下,发现以jquery+ajax方式实现单张图片上传的代码是有的,但实现批量上传图片的程序却没搜索到,于是根据搜索到的代码,写了一个可以批量上传的.先看效果图 点击增加按钮,会增加一个选择框,如下图: 选择要上传的图片,效果图如下: 上传成功如下图: 下面来看代码:前台html主要代码: 复制代码 代码如下: <button id="SubUpload" class="ManagerButton" onClick="TSubmitUpl

  • swfupload ajax无刷新上传图片实例代码

    最近自己做项目的时候需要添加一个功能,上传用户的图片,上传用户图片其实涉及到很多东西,不只是一个html标签<input id="File1" type="file" />或者asp.net封住好的FileUpload 控件,现在网站不再讲究的是功能性,更多的是用户体验性,在这里上传图片就需要用到ajax无刷新上传图片,这里面包含的东西不是一点半点.这里用到的是一个插件swfupload 实现无刷新上传图片.直接上传我的代码供大家参考. 前台代码区: 复

  • Jquery ajaxsubmit上传图片实现代码

    而且未建立统一上传函数.于是将代码改造了.心想来个ajax异步上传图片吧,这技术应该很老套了.于是直接打开强大的cnblogs轻松的找到了 这篇文章 直接依葫芦画瓢,将该作者的劳动成果直接"拿来主义了".很快就把代码全改造了.可是当我把程序发布到服务器上的时问题来了.上传文件失效了!汗- 都是偷懒造成的恶果.继续打开先前参考的那篇文章.原来作者解释了只能在本地使用而不能发布到服务器上.心想我难道还得用 iframe + http post 这个 郁闷的方式么?? 于是不甘心的我打开了更

  • php ajax无刷新上传图片实例代码

    AJAX 客户端页面代码: index.html 复制代码 代码如下: <html> <body> <h1>Ajax file upload sample</h1><br/><input id="uplaod" name="btn_send" type="button" value="上传测试"/> <div id=result></di

  • jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码

    (jsp需要引入 :jquery-1.9.0.js.jquery.form.js ) ,jsp页面使用的是bootstrap制作的,看不懂的标签不用管,form表单大同小异.代码比较简陋,只是为了演示使用ajaxSubmit异步上传图片及保存数据,请海含! (参考文献:http://www.jb51.net/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html) 一:web (add.jsp) 复制代码 代码如下: <%@page impor

  • PHP+jQuery+Ajax实现多图片上传效果

    今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met

  • Javascript异步表单提交,图片上传,兼容异步模拟ajax技术

    前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难. 注意事项: 这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解. bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/20

  • 自己动手打造ajax图片上传(网上没有的)

    今天笔者需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的.于是就自己动手写了一个. 方法1,仅使用jquery代码,不用第三方插件.代码如下 <p> <label>上传图片</label> <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /&g

  • php+ajax实现图片文件上传功能实例

    目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子. 方法一,利用jquery ajaxfileupload.js实现文件上传 其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理.实际上在用PHP上传文件时...只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.g

  • Ajax上传图片的本质

    1.图片上传到服务器. 2.后台将图片地址传到html页面,以图片形式展现. 3.后天将图片地址加入到input表单中,表单处于隐藏状态. 4.前端删除图片,通过js操作,移除图片与表单数据. 5.图片上传表单,是单独的.不能嵌套在总的表单中. 6.牛逼的图片上传,可以对图片进行处理.压缩,加水印等. 7.点击btn,触发图片点击,图片改变之后,触发图片表单提交. 点击按钮 <div id="up_status" style="display:none">

  • Ajax上传图片及上传前先预览功能实例代码

    手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

  • vuejs使用FormData实现ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图 前端实现 <template> <div class="admin"> <d

  • Ajax 上传图片并预览的简单实现

    1. 直接上最简单的 一种 ajax 异步上传图片,并预览 html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>图片上传 | cookie</title> </head> <body> file: <

  • Yii+upload实现AJAX上传图片的方法

    本文实例讲述了Yii+upload实现AJAX上传图片的方法.分享给大家供大家参考,具体如下: 控制器代码: /** * get ajax uploaded files. */ public function actionGetAjax(){ $model=new Attachment();//加载附件模型 $tmpFile = CUploadedFile::getInstanceByName('image');//读取图像上传域,并使用系统上传组件上传 $Directroy = Yii::ap

  • Yii2实现ajax上传图片插件用法

    本文实例讲述了Yii2实现ajax上传图片插件用法.分享给大家供大家参考,具体如下: 这里需要先下载 mdmsoft/yii2-upload-file.插件. 代码如下: public function actionCreate() { $model = new DynamicModel([ 'nama', 'file_id' ]); // behavior untuk upload file $model->attachBehavior('upload', [ 'class' => 'mdm

  • ajax上传图片到PHP并压缩图片显示的方法

    本文实例为大家分享了ajax上传图片到PHP并压缩图片显示的具体代码,供大家参考,具体内容如下 需求就是,上传图片并压缩图片页面效果如下图: HTML代码 <div id="main"> <div class="demo"> <div class="btn btn-success"> <span>上传图片</span> <input id="fileupload"

  • MySQL+SSM+Ajax上传图片问题

    第一次写上传图片的代码,碰到很多问题.昨天做了整整一天,终于在晚上的时候成功了.大声欢呼. 但是,做完之后,还是有很多问题想不通.所以在这里也算是写个笔记,日后忘记了可以回顾,也算请教各路朋友.(^_^) Q.1. 网上说Ajax不能上传文件,但是这个说法并不是很多,也还是有蛮多通过Ajax上传文件的分享. 我也没有通过Ajax做出来,最后是通过AjaxSubmit这个方法写的. Q.2. AjaxSubmit这个方法对文件上传的大小有默认限制吧.我选择大于100KB的文件上传就不能成功,小于1

  • React+ajax+java实现上传图片并预览功能

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图片到服务器,并且返回图片名字和图片在服务器的路径,然后在页面显示文件名字和图片. 源码:ajax上传预览 React中: import React from 'react'; import Http from './http' const URL = 'http://localhost:8080/f

随机推荐