如何使用ajax jquery将图像插入数据库

时间:2017-05-19 10:12:21

标签: javascript php jquery html ajax

所以我有一个表单更新,但我的问题是我不能将我的图像保存到我的数据库只有文件路径..

这是我的代码。

<form action="" id="update_profile" method="POST" enctype="multipart/form-data">
   <div class="col-md-4">
     <img class="img-responsive" id="profile_image" name="profile_image" src=""/>
     <input class="btn-success" type="file" name="image" id="image" onchange="loadFile(event)">
   </div>
     <input type="text" id="users_lastname" name="users_lastname" class="form-control" value="">
</form>

从表单更新我使用ajax将数据从我的数据库显示到表单字段..

   $.ajax({
          url:'../ajax/getprofile.php',
          type:'POST',
          data:{userid:user},
          dataType:'JSON',
          success: function(result){
          $('#profile_image').attr('src',result.profile_image);  
          $('#users_lastname').val(result.users_firstname);
          },
          error:function(status){

          }
      });

$('#update_profile').submit(function(){
     var formData = new FormData($(this)[0]);
    $.ajax({
      url: '../ajax/update_profile.php',
      type:'POST',
      data: formData,
      dataType: 'JSON',
      contentType: false,
      cache: false, 
      processData:false,
      success:function(result){
        console.log(result);
      },
      error:function(status){
        // console.log(status.responseText);
      }
    });
});

并使用另一个ajax来提交表单,所以基本上发生的是来自<img src="../assets/img/faces/avatar.jpg">这是我从我的数据库显示我的图像的地方。当我点击<input class="btn-success" type="file" name="image" id="image" onchange="loadFile(event)"> <img src="../assets/img/faces/koala.jpg">将更改其值...

if (isset($_POST)) {
$users_lastname = $_POST['users_lastname'];
$profile_image = $_POST['profile_image'];

$imgFile = $_FILES['image']['name'];
$tmp_dir = $_FILES['image']['tmp_name'];
$imgSize = $_FILES['image']['size'];
}
if($imgFile)
        {
            $upload_dir = '../assets/img/faces/'; // upload directory   
            $imgExt = strtolower(pathinfo($imgFile,PATHINFO_EXTENSION)); // get image extension
            $valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
            $userpic = rand(1000,1000000).".".$imgExt;
            if(in_array($imgExt, $valid_extensions))
            {           
                if($imgSize < 2000000)
                {
                    // unlink($upload_dir.$_SESSION['image']);
                    move_uploaded_file($tmp_dir,$upload_dir.$userpic);
                }
                else
                {
                    echo '<script>
                            alert("Sorry, your file is too large it should be less then 2MB");
                          </script>';
                }
            }
            else
            {
                echo '<script>
                            alert("Sorry, only JPG, JPEG, PNG & GIF files are allowed.");
                      </script>';       
            }   
        }
        else
        {
            $userpic = $imgs; // old image from database
            $userpic = substr($userpic,20);
        }
if(!isset($errMSG))
        {

            $path = '../assets/img/faces/'. $userpic;

            $action= 'Updated his/her information'; 
            $logs= $log->insertLogs($usernm,$action);

          $res = $users->Userupdated($user,$users_firstname,$users_lastname,$users_email);

        $data = $users->updateUserdetail($user,$path,$profile_contact,$profile_address,$profile_department,$profile_specialization,$profile_aboutme);
}
else{
        $errMSG = "Sorry Data Could Not Updated !";
        }   

但是当我尝试上传时没有从src替换图像。会发生什么,它只上传位置路径而不是精确的图像。当我替换图像时,它只上传位置路径..我不知道这是否是正确的方法来获得src image任何想法?

1 个答案:

答案 0 :(得分:0)

试试这个,我在我的一个方案中使用了这个:

var form = $("#update_profile").get(0); 
        e.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form

        $.ajax({
            url: '../ajax/update_profile.php',
            type: 'POST',
            data: new FormData(form),
            dataType: 'json',
            mimeType: 'multipart/form-data',
            processData: false,
            contentType: false,
            success: function (response) {


            },
            error: function (data) {

            }
        });