Question

我之前提到过我的注册码。我现在想将图像名称保存到数据库中。图像将使用文件上传上传。使用jquery完成验证，并且必须使用ajax提交表单。现在我已经读过使用ajax无法执行文件上传。这是我的代码的问题。

以下是我的代码：

target(...).property(...).request()...

save_data.php：

<html>
<head>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">     </script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
function ValidateEmail(email) {
    var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|  (([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return expr.test(email);
 };



 $(document).ready(function(){

 $('#submit').on('click', function() {
//e.preventDefault();

    valid = true;   
    if ($('#name').val() == '') {
        alert ("please enter your name");
        //$('#errorMsg1').css('color','red');
        //$('#errorMsg1').html('Please enter your name');
        //document.getElementById("errorMsg1").innerHTML = "You must enter a     name";

        valid = false;
    }

    if ($('#email').val() == '') {
        alert ("please enter your email");
        //$('#errorMsg2').css('color','red');
        //$('#errorMsg2').html('Please enter your emailid');
        //document.getElementById("errorMsg2").innerHTML = "You must enter a email";
         valid = false;
    }
    if (!ValidateEmail($("#email").val())) {
        alert("Invalid email address.");
        //document.getElementById("errorMsg2").innerHTML = "Invalid email address.";
    }

if ($('#bday').val() == '') {
        alert ("please enter your birth date");
        //$('#errorMsg3').css('color','red');
        //$('#errorMsg3').html('Please enter your birth date');
        //document.getElementById("errorMsg3").innerHTML = "You must enter your birth-date";
         valid = false;
    }  
if ($('#gender').val() == '') {
        alert ("please select your gender");
        //$('#errorMsg4').css('color','red');
        //$('#errorMsg4').html('Please select your gender');
        //document.getElementById("errorMsg4").innerHTML = "You must select your gender";


         valid = false;
    }  
if ($('#image').val() == '') {
        alert ("please select an image");
        //$('#errorMsg5').css('color','red');
        //$('#errorMsg5').html('Please select an image');
        //document.getElementById("errorMsg5").innerHTML = "You must select an image";


         valid = false;
    }  
 });   
return false;



 $("#multiform").submit(function (e)
{

var formObj=$(this);
var formURL=formObj.attr("action");
var formData=new formData(this);
$ajax({
 URL:formURL,
type:'POST',
data:formData,
mimeType:"multipart/form-data",
contentType:false,
cache:false,
processData:false,
success:function(data,textStatus,jqXHR){
},
error:function(jqXHR,textStatus,errorThrown){
}


});
  e.preventDefault();
e.unbind();
}



);
return true;
$("#multiform").submit();

});
</script>


</head>
<body>
<form name="multiform" id="multiform" action="save_data.php" method="POST"   enctype="multipart/form-data">
<h4>Name:</h4> <input type="text" name="name" id="name"  autofocus>
 <br><br>
<h4>E-mail:</h4> <input type="text" name="email" id="email"  autofocus>
 <br><br>
 <h4>Birth-date:</h4> <input type="text" name="bday" id="bday"  autofocus>
 <br><br>
  <h4>Gender:</h4>
 <input type="radio" name="gender" id="gender" value="female"   autofocus>Female
   <input type="radio" name="gender" id="gender" value="male"  autofocus>Male
      <br><br>
    Select Image:<input type="file" name="image" id="image"><br><br>

<input type="submit" id="submit" name="submit" value="Submit">






</form>




</body>
</html>

Answer 1

您无法将图像保存到数据库中，但可以在使用php将图像保存到文件夹之前保存路径网址。为此，您必须修改您的ajax代码和您的php文件，因为为了完成所有这些，我们必须使用$ _FILES来提取名称，类型，大小和temp_folder以将其移动到填充程序中。

重写你的ajax代码。
使用$ _FILES获取文件的属性
```
<script type="text/javascript">
    $('body').on('click','#submit', function() {
        $.ajax({
            type:'POST',
            url:'save_data.php',
            data: new FormData($('#your_id_form')[0]),
            contentType:false,
            cache:false,
            processData:false,
            success:function(upload) {
                $('#multiform').html(upload):
            }
        });         
    });
</script>

<form id="your_id_form" method="POST" action="save_data.php">
    <input type="name" placeholder="Your name">
    <input type="file" name="file">
    <input type="button" id="submit">
</form>
<div id="multiform"></div>
```
//save_data.php $name = $_POST['name']; $file_name = $_FILES['file']; $file_size = $file_name['size']; $file_type = $file_name['type']; $file_tmp = $file_name['tmp_name']; list($name,$type) = explode('/',$file_type); $save_temp = $file_tmp; //create a new folder named images into your root page $new_path = 'images/'.$name.$type; //we move the file from the temporal folder to a new folder move_uploaded_file($save_temp, $new_path); $file_url = 'images/'.$file_type; $sql = "INSERT INTO database (name,file_url) VALUES ('$name', '$new_path')"; //do stuffs for connect your query to your database echo 'Uploaded!'; ？＆GT;

使用文件上载方法将映像名称插入数据库

1 个答案: