thinkPHP利用ajax异步上传图片并显示、删除

近来学习tp5的过程中,项目中有个发帖功能,选择主题图片。如下:

利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题。使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题。



表单文件form:


<form method="post" enctype="multipart/form-data">
<div style="margin: 20px 20px 20px 10px;">
    主题图片:
    <span id="img-list-box" style="margin-left: 25px;"></span>
    <span style="display:inline-block;height: 30px;position: relative;top:0px;left:0px;">
        <a style="display: inline-block;width: 100px;height:30px;line-height: 30px;text-align:center;background: #F60;color: #FFF;">图片上传</a>
        <input type="file" name="img_src" style="width: 100px;border: 1px solid red;position: absolute;top:0px;left: 0px;height: 30px;opacity: 0;" id="up-img-file" onchange="upimg(this)">
     </span>
</div>
</form>

需要发送Ajax请求的话,当然表单是不能实现我们的需求的,因此,我们需要给表单关联一个单击事件去帮我们进行Ajax请求并选择图片。
当我们点击上传图片这个button按钮时触发选择图片实现Ajax上传

JavaScript代码:



<script type="text/javascript" src="__STATIC__/home/js/jquery.min.js"></script>
<script type="text/javascript">
    function upimg(obj)
    {
        if( obj.value == "" ) {
            return;
        }
        var formdata = new FormData();
        //<input type="file" name="img" value="" />
        formdata.append("img" , $(obj)[0].files[0]);//获取文件法二
        $.ajax({
            type : 'post',
            url : '/home/note/upimg', //接口
            data : formdata,
            cache : false,
            processData : false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
            contentType : false, // 不设置Content-type请求头
            success : function(response){
                console.log(response);
                var html = '<div style="position: relative;margin-right: 20px;margin-bottom: 15px;width: 132px;display: inline-block;border: 1px solid #CCC;background:#EEE;">'
                        +'<span style="display: block;width: 120px;height: 80px;border: 1px solid #F2F1F0;margin: 5px;overflow: hidden;">'
                        +'<img src="'+response+'" style="width: 100%;" />'
                        +'</span>'
                        +'<input type="hidden" name="imgs[]" value="'+response+'" />'
                        +'<a onclick="delImg(this);" style="z-index: 10;display: block;top: -8px;cursor:pointer;right: -8px;position:absolute;width: 20px;height: 20px;background: #CCC;border-radius:100%;text-align:center;line-height: 20px;border: 1px solid #C1C1C1;color: #555;">X</a>'
                        +'</div>';

                $('#img-list-box').append(html);
            },
            error : function(){ }
        });
    }

    function delImg(obj)
    {
        $(obj).parent('div').remove();
    }
</script>

点击选择图片之后就是交给服务器端处理了。
php接口文件:


    public function upimg()
    {
        //验证
        $file = request()->file('img');
        // 移动到框架应用根目录/public/uploads/ 目录下
        if($file){
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if($info){
                // 成功上传后 获取上传信息
                $img_src = '/uploads/'.$info->getSaveName();
                echo $img_src; //返回ajax请求
            }else{
                // 上传失败获取错误信息
                $this->error($file->getError());
            }
        }
    }

改善后的效果图:

原文地址:https://segmentfault.com/a/1190000016510168

原文地址:https://www.cnblogs.com/lalalagq/p/9969899.html

时间: 2024-10-09 19:23:59

thinkPHP利用ajax异步上传图片并显示、删除的相关文章

使用Ajax异步上传图片的方法(html,javascript,php)

前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-form"> <input id="fileupload" type="file" name="file" > </form> HTML代码没什么好说,一个form表单,还有文件类型的input.我们来看js部分.

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错.后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的. 源码: /** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 * 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, * 显示到页面时完全按传入的顺

[Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上传文件的操作:          //第1次,post 只上传文件,返回文件名name          //第2次,get 根据文件名name定位服务器上的文件,同时根据浏览器传过来的realname重命名服务器上的文件          //(如果有其他参数,也可以通过第2次一并上传) 图片文件

利用ajax异步校验验证码(转)

利用ajax异步校验验证码 示例结果如图所示 具体步骤如下: step1: jsp页面及js脚本 [html] view plain copy print? <%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %> <html> <head> <title>form</title> <script type="

ajax异步上传图片文件并将其转换为base64格式

高级浏览器上面,可以直接使用html5的FileReader,实现获取上传文件的base64格式,并以字符串形式提交.对于IE9以下的浏览器,就得另想他法.下面是高级浏览器的示例代码. $('.image').change(function(e) { var target = $(e.target); var file; if(target[0].files && target[0].files[0] ) { file = target[0].files[0]; } if(file) {

ajax异步上传图片三种方案

转自:http://www.jb51.net/article/51180.htm 注:自己尝试了前两种,都可用: 目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子. 方法一,利用jquery ajaxfileupload.js实现文件上传 其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理.实际上在用PHP上传文件时...只能用$_FILES形式,但是若我

Struts2学习(四)利用ajax异步上传

上一篇说到怎样在struts2中进行上传下载.我们使用了struts的标签通过表单提交的方式,但大家知道表单提交会造成页面总体的刷新,这样的方式很不友好,那我们今天就来说说怎样结合ajax方式进行异步上传. 此例中须要的文件能够点击这里下载:struts2异步所需文件 文件说明: ajaxfileupload.js : jquery不支持上传,所以使用这个ajax插件,和 jquery 中的ajax使用方法差点儿相同,从以下代码能够看到. json2.js : 对ajax中的回调參数进行json

ajax异步上传图片&amp;SpringMVC后台代码

function uploadPic(){ var options = { url : "/upload/updatePic.action", type : "post", dataType : "json", success : function(data){ $("#allUrl").attr("src", data.url); $("#imgUrl").val(data.url);

javaweb局部刷新-ajax异步请求springMVC显示返回的jsp内容,代替iframe

在jsp上要引入jquery <script src="<%=request.getContextPath()%>/js/jquery_ui/jquery.js"></script> 在js中发起请求 function get(p) { var patch="show"+p; $.ajax({ //这是$.ajax()方法 type:"POST", url:patch, //路径可以用相对路径,起点以此方法所在