Question

我想使用jquery，Ajax和PHP将图像作为BLOB文件保存在数据库中。我可以上传它并以表格形式显示（如果它是手动插入数据库中的）。但是，当我在表单上更改它时，新图像会很好地显示，但是当我单击“保存”时，它不会保存在数据库中。我在这里找不到使用jquery，Ajax和PHP并将整个图像存储在数据库中的任何解决方案。

这是我的HTML代码（Content / users.php）的一部分：

   <img src="images/defaultprofile.png" id="photoUserUpload"
   name="image" onClick="triggerClick()" />
   <input type="file"name="profileImage" id="profileImage" style="display: 
   none;" accept=".jpg, .png" onchange="displayImage(this)" />
</div>
<div> 
  <button id="saveTechItem" class="btn btn-primary saveTechItem">Save</button></div>

这是我的js代码（Data_Scripts / users.js）的一部分：

$(document).on("click", ".saveItem", function() {
    if (validateForm()) {   
        addOrUpdateItem();
    }
});
function addOrUpdateItem(event) {
    var itemId = $("#userId").val();
    var fullName = $("#txtUserName").val();

    var pic=$("#photoUserUpload").attr('src');
    alert (pic);

    //I tried also to append the file before submit
    var file=new FormData();
    file.append('file', file2);
    //alert (file2);

    var itemData = {
        id: itemId,
        postType: 'addOrUpdate',
        fullName: fullName,
        pic:pic
    };

    $.ajax({
        url: 'data_ajax/users.php',
        data: itemData,
        type: "POST",
        cache: false,
        success: function(data) {
               location.reload();
        },
        error: function(e) {
            alert("error while trying to add or update user!");
        }
    });   
}

这是我的PHP代码（DataAjax / user.php）的一部分：

if (isset($_POST['id'])) {
    $postType = $_POST['postType'];
    if ($postType == "addOrUpdate") {   
        $Id = $_POST['id'];
        $FullName = $_POST['userName']; 
        $pic = base64_encode(file_get_contents($_POST['pic']));
        $data = new Data();
        $db = $data->dataHandler();
        $query = "INSERT INTO Users (`id`, `fullname`, `image`) 
                values ('$Id', '$FullName', '$pic')";
        $db->query($query);
         }
}

Answer 1

要通过ajax上传文件，您必须使用formdata对象（其中包含文件/ blob对象），将其作为数据参数传递给$ .ajax，并将processData和contentType设置为false。

import "github.com/me/myapp/protos"

您必须使用function addOrUpdateItem(event) { var itemId = $("#userId").val(); var fullName = $("#txtUserName").val(); var pic = $("#profileImage").prop('files')[0]; var data = new FormData(); data.append('id', itemId); data.append('postType', addOrUpdate); data.append('fullName', fullName); data.append('pic', pic); $.ajax({ url: 'data_ajax/users.php', data: data, type: "POST", cache: false, contentType: false, dataType: false, success: function(data) { location.reload(); }, error: function(e) { alert("error while trying to add or update user!"); } }); }来访问文件

$_FILES['pic'][tmp_name]

Answer 2

您在Postdata中传递错误的图像数据的方式尝试在代码中的示例以下

html 文件输入：

<input type="file"name="profileImage" id="profileImage" accept=".jpg, .png"  />

具有 AJAX 代码的脚本文件代码：

var itemId = $("#userId").val();
    var fullName = $("#txtUserName").val();
    var filedata = $("#profileImage").val();

    //Your Formdata Ready To Send
    var data = new FormData();
    data.append('file', filedata);
    data.append('id', itemId);
    data.append('fullName', fullName);


$.ajax({
    url: 'data_ajax/users.php',
    data: data,
    type: "POST",
    contentType: false,
    cache: false,
    processData:false,
    success: function(data) {
           location.reload();
    },
    error: function(e) {
        alert("error while trying to add or update user!");
    }
});

PHP 文件代码：

if (isset($_POST['id'])) {
    $postType = $_POST['postType'];
    if ($postType == "addOrUpdate") {   
        $Id = $_POST['id'];
        $FullName = $_POST['fullName']; 

        // chnage this line
        $pic = base64_encode(file_get_contents($_FILES['file']));
        // or you can send all data in serilize way in database like this
        $pic = serialize($_FILES['file']);

        $data = new Data();
        $db = $data->dataHandler();
        $query = "INSERT INTO Users (`id`, `fullname`, `image`) 
                values ('$Id', '$FullName', '$pic')";
        $db->query($query);
         }
}

如何使用jquery，ajax和php在数据库中保存图像文件（BLOB）

2 个答案: