使用jquery上传图片答案

【问题标题】：Upload image using jquery使用jquery上传图片
【发布时间】：2015-06-29 17:51:58
【问题描述】：

我有一个工作 php 代码可以在数据库中上传图像。是否可以将其转换为 jquery？如果是这样，我需要做什么？我是 jquery 的新手。谢谢

这段代码工作得很好。但我需要在 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>';                  
        }
    }

【问题讨论】：

你可以试试jquery插件。例如，Plupload plupload.com 效果很好，并且具有上传进度等简洁的功能

标签： php jquery image-uploading

【解决方案1】：

您可以进行 ajax 调用来提交表单。你也可以使用这样的东西：

https://blueimp.github.io/jQuery-File-Upload/

虽然，您仍然需要有您的 php 代码才能将文件存储在您的服务器中

【讨论】：

【解决方案2】：

<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>

您需要首先为表单的提交事件设置回调。
```
$("#formupload").on("submit", upload_image);
```
- JQuery 选择器的工作方式与 CSS 很相似； $("#formupload") 选择 id 为 formupload 的元素。
- on 用于注册事件的处理程序。
- 在这里，我们正在为 id 为 formupload 的元素的 submit 事件设置处理程序（upload_image 函数）。

对 php 脚本进行 AJAX 调用。

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 属性指定成功回调，这是文件上传完成时将调用的函数。

【讨论】：