Rumah pembangunan bahagian belakang tutorial 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>
Salin selepas log masuk

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>
Salin selepas log masuk

后台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>
Salin selepas log masuk

配置文件:

<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>
Salin selepas log masuk

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>
Salin selepas log masuk

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Aplikasi asli Hongmeng puisi rawak Aplikasi asli Hongmeng puisi rawak Feb 19, 2024 pm 01:36 PM

Untuk mengetahui lebih lanjut tentang sumber terbuka, sila lawati: Komuniti Pembangun 51CTO Hongmeng https://ost.51cto.com Persekitaran berjalan DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. Untuk membuat aplikasi, klik Fail- >newFile->CreateProgect. Pilih templat: [OpenHarmony] EmptyAbility: Isikan nama projek, shici, nama pakej aplikasi com.nut.shici dan lokasi storan aplikasi XXX (tiada bahasa Cina, aksara khas atau ruang). CompileSDK10, Model: Stage. Peranti

Apakah perbezaan antara MySQL5.7 dan MySQL8.0? Apakah perbezaan antara MySQL5.7 dan MySQL8.0? Feb 19, 2024 am 11:21 AM

MySQL5.7 dan MySQL8.0 ialah dua versi pangkalan data MySQL yang berbeza Terdapat beberapa perbezaan utama antara mereka: Peningkatan prestasi: MySQL8.0 mempunyai beberapa peningkatan prestasi berbanding MySQL5.7. Ini termasuk pengoptimum pertanyaan yang lebih baik, penjanaan pelan pelaksanaan pertanyaan yang lebih cekap, algoritma pengindeksan yang lebih baik dan pertanyaan selari, dsb. Penambahbaikan ini boleh meningkatkan prestasi pertanyaan dan prestasi keseluruhan sistem. Sokongan JSON: MySQL 8.0 memperkenalkan sokongan asli untuk jenis data JSON, termasuk penyimpanan, pertanyaan dan pengindeksan data JSON. Ini menjadikan pemprosesan dan memanipulasi data JSON dalam MySQL lebih mudah dan cekap. Ciri transaksi: MySQL8.0 memperkenalkan beberapa ciri transaksi baharu, seperti atomic

Gabungan golang WebSocket dan JSON: merealisasikan penghantaran dan penghuraian data Gabungan golang WebSocket dan JSON: merealisasikan penghantaran dan penghuraian data Dec 17, 2023 pm 03:06 PM

Gabungan golangWebSocket dan JSON: merealisasikan penghantaran dan penghuraian data Dalam pembangunan Web moden, penghantaran data masa nyata menjadi semakin penting. WebSocket ialah protokol yang digunakan untuk mencapai komunikasi dua hala Tidak seperti model respons permintaan HTTP tradisional, WebSocket membenarkan pelayan untuk menolak data secara aktif kepada klien. JSON (JavaScriptObjectNotation) ialah format ringan untuk pertukaran data yang ringkas dan mudah dibaca.

Petua pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON Petua pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON May 04, 2024 pm 06:15 PM

Kaedah pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON termasuk: menggunakan sambungan JSON dan fungsi json_encode() menambah pilihan JSON_UNESCAPED_UNICODE untuk mengelakkan aksara melarikan diri menggunakan penimbal untuk meningkatkan prestasi pengekodan JSON; Pustaka pengekodan JSON.

Tutorial penggunaan Panda: Permulaan pantas untuk membaca fail JSON Tutorial penggunaan Panda: Permulaan pantas untuk membaca fail JSON Jan 13, 2024 am 10:15 AM

Permulaan Pantas: Kaedah Pandas membaca fail JSON, contoh kod khusus diperlukan Pengenalan: Dalam bidang analisis data dan sains data, Pandas ialah salah satu perpustakaan Python yang penting. Ia menyediakan fungsi yang kaya dan struktur data yang fleksibel, serta boleh memproses dan menganalisis pelbagai data dengan mudah. Dalam aplikasi praktikal, kita sering menghadapi situasi di mana kita perlu membaca fail JSON. Artikel ini akan memperkenalkan cara menggunakan Panda untuk membaca fail JSON dan melampirkan contoh kod tertentu. 1. Pemasangan Panda

Bagaimanakah anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahsirilan JSON? Bagaimanakah anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahsirilan JSON? May 06, 2024 pm 10:09 PM

Anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahserilangan JSON: Pensirilan: @JsonIgnore: Abaikan harta @JsonProperty: Tentukan nama @JsonGetter: Gunakan kaedah get @JsonSetter: Gunakan kaedah yang ditetapkan Deserialization: @JsonIgnoreProperties: Abaikan harta @ JsonProperty: Nyatakan nama @JsonCreator: Gunakan pembina @JsonDeserialize: Logik tersuai

Gunakan fungsi json.MarshalIndent dalam golang untuk menukar struktur kepada rentetan JSON yang diformatkan Gunakan fungsi json.MarshalIndent dalam golang untuk menukar struktur kepada rentetan JSON yang diformatkan Nov 18, 2023 pm 01:59 PM

Gunakan fungsi json.MarshalIndent dalam golang untuk menukar struktur menjadi rentetan JSON yang diformatkan Apabila menulis program dalam Golang, kita selalunya perlu menukar struktur menjadi rentetan JSON Dalam proses ini, fungsi json.MarshalIndent boleh membantu kita output berformat. Di bawah ini kami akan menerangkan secara terperinci cara menggunakan fungsi ini dan memberikan contoh kod khusus. Mula-mula, mari buat struktur yang mengandungi beberapa data. Berikut adalah petunjuk

Cara mengendalikan format data XML dan JSON dalam pembangunan C# Cara mengendalikan format data XML dan JSON dalam pembangunan C# Oct 09, 2023 pm 06:15 PM

Cara mengendalikan format data XML dan JSON dalam pembangunan C# memerlukan contoh kod khusus Dalam pembangunan perisian moden, XML dan JSON ialah dua format data yang digunakan secara meluas. XML (Extensible Markup Language) ialah bahasa penanda yang digunakan untuk menyimpan dan menghantar data, manakala JSON (JavaScript Object Notation) ialah format pertukaran data yang ringan. Dalam pembangunan C#, kami selalunya perlu memproses dan mengendalikan data XML dan JSON Artikel ini akan memfokuskan pada cara menggunakan C# untuk memproses kedua-dua format data ini dan melampirkan

See all articles