沃梦达 / 编程问答 / php问题 / 正文

使用jquery上传图片

Upload image using jquery(使用jquery上传图片)

本文介绍了使用jquery上传图片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个可用的 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上传图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:使用jquery上传图片

基础教程推荐