javascript - 使用ajax上传图片并传递多个参数

Question

我在使用其他输入文本表单上传图像并将其发送到 ajax_php_file.php 时遇到问题。但只上传了图片，我输入的文字都是空的。如果有人可以在这里提供帮助，我将不胜感激。多谢。

        <div id="imagebox">      
        <div class="image_preview">
        <div class="wrap">

        <img id="previewing"  />
        </div>

        <!-- loader.gif -->
        </div><!--wrap-->


        <!-- simple file uploading form -->

        <form id="uploadimage"  method="post"  enctype="multipart/form-data">

        <input id="file" type="file"  name="file" /><br>
        <div id="imageformats"> 
        Valid formats: jpeg, gif, png, Max upload: 1mb
        </div> <br>

        Name: 
        <input id="name" type="text"/>
        <input id="cat" type="hidden" value="company"/>
        Description
        <textarea id="description" rows="7" cols="42" ></textarea>
        Keywords: <input id="keyword" type="text" placeholder="3 Maximum Keywords"/>

        <input type="submit"  value="Upload" class="pre" style="float:left;"/>        
        </form>

        </div>

        <div id="message">          
        </div>

脚本.js

       $(document).ready(function (e) {
       $("#uploadimage").on('submit',(function(e) {
       e.preventDefault();
       $("#message").empty(); 
       $('#loading').show();


       var name = document.getElementById("name").value; 
       var desc = document.getElementById("description").value;
       var key = document.getElementById("keyword").value;
       var cat = document.getElementById("cat").value; 

       var myData = 'content_ca='+ cat + '&content_desc='+desc+ '&content_key='+key+ '&content_name='+name;    

        $.ajax({
        url: "ajax_php_file.php",       // Url to which the request is send
        type: "POST",                   // Type of request to be send, called as method
        data:  new FormData(this,myData),       // Data sent to server, a set of key/value pairs representing form fields and values 
        //data:myData,
        contentType: false,             // The content type used when sending data to the server. Default is: "application/x-www-form-urlencoded"
        cache: false,                   // To unable request pages to be cached
        processData:false,              // To send DOMDocument or non processed data file it is set to false (i.e. data should not be in the form of string)
        success: function(data)         // A function to be called if request succeeds
        {
        $('#loading').hide();
        $("#message").html(data);           
        }           
   });
}));

        // Function to preview image
        $(function() {
        $("#file").change(function() {
        $("#message").empty();         // To remove the previous error message
        var file = this.files[0];
        var imagefile = file.type;
        var match= ["image/jpeg","image/png","image/jpg"];  
        if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
        {
        $('#previewing').attr('src','noimage.png');
        $("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
        return false;
        }
        else
        {
            var reader = new FileReader();  
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }       
        });
        });
        function imageIsLoaded(e) { 
        $("#file").css("color","green");
        $('#image_preview').css("display", "block");
        $('#previewing').attr('src', e.target.result);
        $('#previewing').attr('width', '250px');
        $('#previewing').attr('height', '230px');
        };
        });

ajax_php_file.php

       <?php

       session_start();

       $user_signup = $_SESSION['user_signup'];

       if(isset($_FILES["file"]["type"]))  
       {

       $name = filter_var($_POST["content_name"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
       $ca = filter_var($_POST["content_ca"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); 
       $desc = filter_var($_POST["content_desc"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
       $key = filter_var($_POST["content_key"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);



       $validextensions = array("jpeg", "jpg", "png");
       $temporary = explode(".", $_FILES["file"]["name"]); 
       $file_extension = end($temporary);

       $imagedata = addslashes(file_get_contents($_FILES['file']['tmp_name']));
       $imagename= ($_FILES['file']['name']);
       $imagetype =($_FILES['file']['type']);

       if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")
        ) && ($_FILES["file"]["size"] < 1000000)//Approx. 100kb files can be uploaded.
        && in_array($file_extension, $validextensions)) 
       {

       if ($_FILES["file"]["error"] > 0)
       {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
       } 
       else 
       { 
            if (file_exists("upload/" . $_FILES["file"]["name"])) {
            echo $_FILES["file"]["name"] . " <span id='invalid'><b>already exists.</b></span> ";
            } 
            else 
            {                   
                $sourcePath = $_FILES['file']['tmp_name'];   // Storing source path of the file in a variable
                $targetPath = "upload/".$_FILES['file']['name'];  // Target path where file is to be stored
                move_uploaded_file($sourcePath,$targetPath) ; //  Moving Uploaded file                      

                echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>";
                echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
                echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
                echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
                echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";


           mysql_query("INSERT INTO upload(name,picname,image,type,email,cat,description,keyword) VALUES('".$name."','".$imagename."','".$imagedata."','".$imagetype."','".$user_signup."','".$ca."','".$desc."','".$key."')");



            }                      
           }        
          }   
        else 
         {
         echo "<span id='invalid'>***Invalid file Size or Type***<span>";
         }
         }
         ?>

Answer 1

formData 的格式可能不正确。将其更改如下:

var myData = {'content_ca':cat,
              'content_desc':desc
             }