使用jquery上传图片

Question

我有一个工作的PHP代码来上传数据库中的图像.可以将它转换为jquery吗？如果是这样,我需要做什么？我是jquery btw的新手.谢谢

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

Answer 1

<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. 您需要首先为表单的提交事件设置回调.

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

   • JQuery选择器的工作方式与CSS类似; $("#formupload")选择id为的元素formupload.
   • on 用于注册事件的处理程序.
   • 这里,我们正在为submitid为的元素的事件设置一个处理程序(upload_image函数)formupload.

2. 对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响应,这是函数的前几行.
   • 使用$.ajaxjAX实用程序进行AJAX调用以执行AJAX调用.
   • 该url属性将由您的PHP脚本填充.
   • 由于它是文件上载,因此将HTTP方法指定为POST.
   • 该data属性是POST请求的有效内容,它是您尝试上载的文件的内容.
   • 您可以使用success属性指定成功回调,该属性是在完成文件上载时调用的函数.