首页 后端开发 php教程 thinkphp(php)+Ajax上传图片

thinkphp(php)+Ajax上传图片

Aug 08, 2016 am 09:23 AM
data file json return

使用的外部插件:

  • jquery.form.js(表单提交) :http://malsup.com/jquery/form/#download

  • jquery.json.min.js(解析json数据):http://www.oschina.net/p/jquery-json

表单代码部分:

<code><form tag="<span">"img_file_upload" id=<span>"file_upload"</span> name=<span>"file_upload"</span><span>method</span>=<span>"post"</span> action=<span>""</span> enctype=<span>"multipart/form-data"</span>>
    <input><span>type</span>=<span>"file"</span> id=<span>"img"</span> name=<span>"file"</span>>
    <input><span>type</span>=<span>"hidden"</span> name=<span>"member_id"</span><span>value</span>=<span>""</span>/>
    <input><span>type</span>=<span>"button"</span><span>value</span>=<span>"上传"</span> >"submitImgForm()"/>
</form>

<img  tag="<span" alt="thinkphp(php)+Ajax上传图片" >"show_photo_upload_img" src=<span>""</span> alt=<span>""</span>/></code>
登录后复制

js代码:

<code><span>script</span>><span><span><span>function</span><span>submitImgForm</span><span>()</span>{</span><span>if</span> ($(<span>"#img"</span>).val() == <span>""</span>) {
            alert(<span>"请选择一个图片文件,再点击上传。"</span>);
            <span>return</span>;
        }
        <span>var</span> file_form = $(<span>"[tag='img_file_upload']"</span>);
        <span>var</span> show_img = $(<span>"[tag='show_photo_upload_img']"</span>);
        <span>var</span> options = {
            type : <span>'post'</span>,
            url : <span>""</span>,
            dataType: <span>'text'</span>,
            contentType: <span>"application/json; charset=utf-8"</span>,
            beforeSubmit:<span><span>function</span><span>()</span>{</span>
              alert(<span>'正在上传'</span>);
            },
            success:<span><span>function</span><span>(data)</span> {</span><span>var</span> json_obj = <span>JSON</span>.parse(data);

                show_img.attr(<span>'src'</span>,json_obj.img_path);
                alert(json_obj.error);
            },
            error:<span><span>function</span><span>(XmlHttpRequest, textStatus, errorThrown)</span>{</span>
                alert(textStatus);
                alert(errorThrown);
            }
        };

        file_form.ajaxSubmit(options);
    }
</span><span><span>script</span>></span></code>
登录后复制

后台php部分:

<code><span><span>function</span><span>fileUpload</span><span>()</span>{</span><span>$config</span> = C(<span>'FILE_UPLOAD_CONFIG'</span>);
        <span>//附带的信息</span><span>$request_data</span> = I(<span>'post.'</span>);
<span>//        show_bug($request_data);</span><span>$member_id</span> = <span>$request_data</span>[<span>'member_id'</span>];
        <span>if</span>(<span>empty</span>(<span>$the_file_usage</span>)){
            <span>$the_file_usage</span> = <span>$file_usage</span>[<span>'DOWNLOAD'</span>];
        }

<span>//        show_bug_with_exit($file_name);</span><span>$file_info</span>[<span>'member_id'</span>] = <span>$member_id</span>;
        <span>$file_info</span>[<span>'created_time'</span>] = time();

            <span>// 上传文件</span><span>//实例化上传类,传入上面的配置数组</span><span>$uploader</span> = <span>new</span> Upload(<span>$config</span>, <span>'Local'</span>);
<span>//            $uploader->saveName = $file_uuid;</span><span>$info</span> = <span>$uploader</span>->upload(<span>$_FILES</span>);
<span>//        show_bug_with_exit($info);</span><span>//这里判断是否上传成功</span><span>if</span> (<span>$info</span>) {
                <span>//// 上传成功 获取上传文件信息</span><span>foreach</span> (<span>$info</span><span>as</span> &<span>$file</span>) {
                    <span>//拼接出上传目录</span><span>$file</span>[<span>'rootpath'</span>] = __ROOT__ . ltrim(<span>$config</span>[<span>'rootPath'</span>], <span>"."</span>);
                    <span>//拼接出文件相对路径</span><span>$file</span>[<span>'filepath'</span>] = <span>$file</span>[<span>'rootpath'</span>] . <span>$file</span>[<span>'savepath'</span>] . <span>$file</span>[<span>'savename'</span>];
                }
                <span>//这里可以输出一下结果,相对路径的键名是$info['upload']['filepath']</span><span>$filepath</span> = <span>$file</span>[<span>'filepath'</span>];
<span>//                show_bug_with_exit($filepath);</span><span>$file_info</span>[<span>'file_path'</span>] = <span>$filepath</span>;


                <span>$save_file_in_DB</span> = <span>$this</span>->saveFileInfoIntoDB(<span>$file_info</span>);
                <span>//如果文件数据往数据库中存储失败,则删除文件</span><span>if</span>(!<span>$save_file_in_DB</span>){
                    unlink(<span>$filepath</span>);
                    <span>$return_data</span>[<span>'error'</span>] = <span>'文件上传失败,请重试'</span>;
                    <span>echo</span> json_encode(<span>$return_data</span>);
                }

                <span>$return_data</span>[<span>'error'</span>] = <span>'文件上传成功'</span>;
                <span>$return_data</span>[<span>'img_path'</span>] = <span>$filepath</span>;
                <span>$return_data</span>[<span>'img_id'</span>] = <span>$save_file_in_DB</span>;
                jsonReturn(<span>$return_data</span>);
            } <span>else</span> {
                <span>//输出错误信息</span><span>$error_msg</span> = <span>$uploader</span>->getError();
                <span>$return_data</span>[<span>'error'</span>] = <span>$error_msg</span>;
                jsonReturn(<span>$return_data</span>);
            }
    }


    <span><span>function</span><span>saveFileInfoIntoDB</span><span>(<span>$file_info</span>)</span>{</span><span>$file</span> = M(<span>'File'</span>);
        <span>$rs_u_file</span> = <span>$file</span>->add(<span>$file_info</span>);
        <span>$file_id</span> = <span>$file</span>->getLastInsID();
        <span>if</span>(!<span>$rs_u_file</span>){
            <span>return</span><span>false</span>;
        }
        <span>return</span><span>$file_id</span>;
    }</code>
登录后复制

配置文件:

<code><span>'FILE_UPLOAD_CONFIG'</span>=><span>array</span>(
        <span>'mimes'</span> => <span>''</span>, <span>//允许上传的文件MiMe类型</span><span>'maxSize'</span> => <span>6</span> * <span>1024</span> * <span>1024</span>, <span>//上传的文件大小限制 (0-不做限制)</span><span>'exts'</span> => <span>array</span>(<span>'jpg'</span>, <span>'gif'</span>, <span>'png'</span>, <span>'jpeg'</span>),<span>// 设置附件上传类型</span><span>'autoSub'</span> => <span>true</span>, <span>//自动子目录保存文件</span><span>'subName'</span> => <span>array</span>(<span>'date'</span>, <span>'Y-m-d'</span>), <span>//子目录创建方式,[0]-函数名,[1]-参数,多个参数使用数组</span><span>'rootPath'</span> => <span>'./Uploads/'</span>, <span>//保存根路径</span><span>'savePath'</span> => <span>''</span>, <span>//保存路径</span><span>'saveName'</span>   =>    <span>array</span>(<span>'uniqid'</span>,<span>''</span>),
    ),</code>
登录后复制

function.php文件

<code><span>/**
 * 返回json格式的数据到客户端
 *<span> @access</span> protected
 *<span> @param</span> mixed $data 要返回的数据
 *<span> @return</span> void
 */</span><span><span>function</span><span>jsonReturn</span><span>(<span>$data</span>)</span>{</span><span>$json_str</span> = json_encode(<span>$data</span>);
    <span>// 返回JSON数据格式到客户端 包含状态信息</span>
    header(<span>'Content-Type:application/json; charset=utf-8'</span>);
    <span>//处理json中包含的‘null’,将其替换成空字符串</span><span>$search</span> = <span>'null'</span>;
    <span>$replace</span> = <span>'""'</span>;
    <span>$returndata</span> = str_replace(<span>$search</span>, <span>$replace</span>, <span>$json_str</span>);
<span>//  testAddDataIntoTestTable(null,$returndata);</span><span>exit</span>(<span>$returndata</span>);
}</code>
登录后复制

以上就介绍了thinkphp(php)+Ajax上传图片,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

鸿蒙原生应用随机诗词 鸿蒙原生应用随机诗词 Feb 19, 2024 pm 01:36 PM

想了解更多关于开源的内容,请访问:51CTO鸿蒙开发者社区https://ost.51cto.com运行环境DAYU200:4.0.10.16SDK:4.0.10.15IDE:4.0.600一、创建应用点击File->newFile->CreateProgect。选择模版:【OpenHarmony】EmptyAbility:填写项目名,shici,应用包名com.nut.shici,应用存储位置XXX(不要有中文,特殊字符,空格)。CompileSDK10,Model:Stage。Device

golang WebSocket与JSON的结合:实现数据传输和解析 golang WebSocket与JSON的结合:实现数据传输和解析 Dec 17, 2023 pm 03:06 PM

golangWebSocket与JSON的结合:实现数据传输和解析在现代的Web开发中,实时数据传输变得越来越重要。WebSocket是一种用于实现双向通信的协议,与传统的HTTP请求-响应模型不同,WebSocket允许服务器向客户端主动推送数据。而JSON(JavaScriptObjectNotation)是一种用于数据交换的轻量级格式,它简洁易读

MySQL5.7和MySQL8.0的区别是什么? MySQL5.7和MySQL8.0的区别是什么? Feb 19, 2024 am 11:21 AM

MySQL5.7和MySQL8.0是两个不同的MySQL数据库版本,它们之间有以下一些主要区别:性能改进:MySQL8.0相对于MySQL5.7有一些性能改进。其中包括更好的查询优化器、更高效的查询执行计划生成、更好的索引算法和并行查询等。这些改进可以提高查询性能和整体系统性能。JSON支持:MySQL8.0引入了对JSON数据类型的原生支持,包括JSON数据的存储、查询和索引。这使得在MySQL中处理和操作JSON数据变得更加方便和高效。事务特性:MySQL8.0引入了一些新的事务特性,如原子

PHP 数组转 JSON 的性能优化技巧 PHP 数组转 JSON 的性能优化技巧 May 04, 2024 pm 06:15 PM

PHP数组转JSON的性能优化方法包括:使用JSON扩展和json_encode()函数;添加JSON_UNESCAPED_UNICODE选项以避免字符转义;使用缓冲区提高循环编码性能;缓存JSON编码结果;考虑使用第三方JSON编码库。

C#开发中如何处理XML和JSON数据格式 C#开发中如何处理XML和JSON数据格式 Oct 09, 2023 pm 06:15 PM

C#开发中如何处理XML和JSON数据格式,需要具体代码示例在现代软件开发中,XML和JSON是广泛应用的两种数据格式。XML(可扩展标记语言)是一种用于存储和传输数据的标记语言,而JSON(JavaScript对象表示)是一种轻量级的数据交换格式。在C#开发中,我们经常需要处理和操作XML和JSON数据,本文将重点介绍如何使用C#处理这两种数据格式,并附上

使用golang中的json.MarshalIndent函数将结构体转换为格式化的JSON字符串 使用golang中的json.MarshalIndent函数将结构体转换为格式化的JSON字符串 Nov 18, 2023 pm 01:59 PM

使用golang中的json.MarshalIndent函数将结构体转换为格式化的JSON字符串在使用Golang编写程序时,我们经常需要将结构体转换为JSON字符串,在这个过程中,json.MarshalIndent函数可以帮助我们实现格式化的输出。下面我们将详细介绍如何使用这个函数,并提供具体的代码示例。首先,让我们创建一个包含一些数据的结构体。以下是示

Pandas使用教程:读取JSON文件的快速入门 Pandas使用教程:读取JSON文件的快速入门 Jan 13, 2024 am 10:15 AM

快速入门:Pandas读取JSON文件的方法,需要具体代码示例引言:在数据分析和数据科学领域,Pandas是一个重要的Python库之一。它提供了丰富的功能和灵活的数据结构,能够方便地对各种数据进行处理和分析。在实际应用中,我们经常会遇到需要读取JSON文件的情况。本文将介绍如何使用Pandas来读取JSON文件,并附上具体的代码示例。一、Pandas的安装

Jackson库中注解如何控制JSON序列化和反序列化? Jackson库中注解如何控制JSON序列化和反序列化? May 06, 2024 pm 10:09 PM

Jackson库中的注解可控制JSON序列化和反序列化:序列化:@JsonIgnore:忽略属性@JsonProperty:指定名称@JsonGetter:使用获取方法@JsonSetter:使用设置方法反序列化:@JsonIgnoreProperties:忽略属性@JsonProperty:指定名称@JsonCreator:使用构造函数@JsonDeserialize:自定义逻辑

See all articles