問題描述

我有一個可用的 php 代碼來上傳數據庫中的圖像.是否可以將其轉換為 jquery?如果是這樣，我需要做什么?順便說一句，我是 jquery 的新手.謝謝

I have a working php code to upload image in the database. Is it Possible to transform it to jquery? If so, what do I need to do? I am new to jquery btw. Thanks

這段代碼工作得很好.但我需要在jquery中做到這一點.

This code works just fine. But I need to do it in jquery.

<form action = 'upload.php' method = 'post' enctype="multipart/form-data">

    <input type="file" name="image" > <br>
    <input type= 'submit' value = 'Add' id = 'Add' name = 'Add'>

</form> 


<?php   
    if(isset($_FILES['image']))
    {
    $target_Path = "images/";
    $target_Path = $target_Path.basename($_FILES['image']['name'] );
    move_uploaded_file( $_FILES['image']['tmp_name'], $target_Path );

    $name = $_FILES['image']['name'];
    }
    if(isset($_POST['Add']))
    {

        if($_POST["Add"] == "Add") 
        {
        $add = "Insert Into img(path) Values('$name')";
        $up = mysql_query($add);

            $status = "Upload success!";
            print '<script type="text/javascript">'; 
            print 'alert(" '.$status.' ")'; 
            print '</script>';                  
        }
    }

推薦答案

<form action='upload.php' method='post' enctype="multipart/form-data" id="formupload">
    <input type="file" name="image"/> <br>
    <input type='submit' value='Add' id='Add' name='Add/>
</form> 

1. 您需要首先為表單的提交事件設置回調.

1. You need to first setup a callback for the submit event of the form.

$("#formupload").on("submit", upload_image);

• JQuery 選擇器的工作方式很像 CSS；$("#formupload") 選擇 id 為 formupload 的元素.
• on 用于注冊事件的處理程序.
• 在這里，我們正在為 id 為 formupload 的元素的 submit 事件設置處理程序(upload_image 函數).
• JQuery selectors work a lot like CSS; $("#formupload") selects the element whose id is formupload.
• on is used to register a handler for an event.
• Here, we are setting up a handler(the upload_image function) for the submit event of the element whose id is formupload.

對 php 腳本進行 AJAX 調用.

Make an AJAX call to the php script.

function upload_image(event){

    event = event || window.event;

    // Prevent the default form action i.e. loading of a new page
    if(event.preventDefault){ // W3C Variant
        event.preventDefault();
    }
    else{ // IE < 9
        event.returnValue = false;
    }

    $.ajax({
        url: "upload.php",
        type: "POST",
        data: new FormData($('#formupload')[0]), 

        success : function(data){
            // Show success message
        },
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        cache: false
    });
}

• 您可以阻止表單提交的默認操作，即加載 POST 響應，這是函數的前幾行所做的.
• 使用 $.ajax 進行 AJAX 調用，這是用于執行 AJAX 調用的 jQuery 實用程序.
• url 屬性將由您的 PHP 腳本的屬性填充.
• 由于是文件上傳，指定HTTP方式為POST.
• data 屬性是 POST 請求的負載，即您嘗試上傳的文件的內容.
• 您可以使用 success 屬性指定成功回調，該函數將在文件上傳完成時調用.
• You can prevent the default action of form submission, which is to load the POST response, which is what the first few lines of the function is doing.
• An AJAX call is made using $.ajax which is the jQuery utility for performing an AJAX call.
• The url property is to be filled by that of your PHP script.
• Since it is a file upload, specify the HTTP method as POST.
• The data property is the payload of the POST request, which is the content of the file you are trying to upload.
• You can specify the success callback using the success property, which is the function that will be called on completion of the file upload.

這篇關于使用jquery上傳圖片的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！