Question

您好我一直在您可以提交图片的网站上工作。我不希望在提交图片时重新加载页面。将图片发布到php页面后，它会在MYSQL数据库中存储一个BLOB。

            form id="form2" action="saveImage.php" method="post" enctype="multipart/form-data">
            <input id="thumbage2" name="Image1" class="ModalArea2" type="file" style="display:none">       
            <center><label for="thumbage2" id="labelthumb2" style="margin-top:35px;">Choose Image</label></center>

            <button class="ModalButton2" >Submit</button>
            <a class="ModalButton2" onclick="cancel2();">Cancel</a>
            </form>

以上是我的HTML代码。这是我的javascript / jQuery代码：

     $(':file').change(function(){
    var file = this.files[0];
    var name = file.name;
    var size = file.size;
    var type = file.type;
    //Your validation
    //console.log(name);
});

$(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'upload.php',  //Server script to process data
        type: 'POST',
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: beforeSendHandler,
        success: completeHandler,
        error: errorHandler,
        // Form data
        data: formData,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });
    cancel2();
});

我从网站上复制了这些代码，但他们并没有很好地解释它是如何工作的。所以目前我将数据发布到我的PHP文件中并且可以正常工作。问题是PHP文件已加载。我认为JQuery的重点不在于加载文件并保持在同一页面上。为什么不发生这种情况？为什么我一直在浏览器中加载PHP页面？谢谢，如果你为我解决了这个问题，我将会在月球上对我来说这对我来说是一个真正的踢球。

Answer 1

我曾经遇到类似的问题一次，就我搜索而言，上传文件而不重新加载页面的唯一方法是使用iFrame。但对我而言，iFrames很难看。

以下方法将图像转换为数据URL，而不是上传图像，将数据URL（只是一个字符串）上传到服务器。

我对您的HTML代码进行了一些更改。我们不想提交表单，因为这会导致网页在浏览器中重新加载。将onsubmit = 'return false;'添加到表单标记将阻止在单击提交按钮时提交表单。

我已经在输入元素中添加了一些ID，以便在JQuery中访问时使它们成为唯一。

然后我添加了一个带有src属性的图片元素。当用户从输入框中选择图像时，此元素的src属性将填充图像的数据URL。

<form id="form2" action="saveImage.php" onsubmit="return false;" method="post" enctype="multipart/form-data">
    <input id="imageSelect" name="Image1" class="ModalArea2" type="file" style="display:block;">       
    <center><label for="thumbage2" id="labelthumb2" style="margin-top:35px;">Choose Image</label></center>
    <button class="ModalButton2" id="uploadImageButton">Submit</button>
    <a class="ModalButton2" onclick="cancel2();">Cancel</a>
    <img id="imgURL" src="none"/>
</form>

接下来是您的JavaScript代码。评论将帮助您了解它的工作原理。它的主要变化是

在输入按钮中添加了一个事件处理程序来选择图像。当用户使用输入按钮选择图像时，onchange事件将触发，<img>元素的src属性将填充图像的数据URL。

第二个主要变化是您的AJAX请求。我已将其更改为.post，因为它更容易阅读（至少对我而言）并且在该请求中，而不是发送图像本身，我们正在发送图像的数据URL来自<img>代码src属性。这是以JSON格式发送的，因此处理上传请求的PHP脚本应该以JSON格式读取数据。

$(':file').change(function(){
    var file = this.files[0];
    var name = file.name;
    var size = file.size;
    var type = file.type;
    //Your validation
    //console.log(name);
});

$('#uploadImageButton').click(function(){
    var imgData = $('#imgURL').src;
    $.post({
        'upload.php', // Name of the PHP script which handles upload function
        {imageData:imgData}, // Use $_POST['imageData] to access the image data in your PHP script
        function data() {
            // whatever you want to do after the POST request is complete
            alert('Uploaded image');
        };

    });
});

$('#imageSelect').change(function(){
    readURL(this);
});

function readURL(input)
{
    if(input.files && input.files[0])
    {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#imgURL').attr('src', e.target.result);
        };
    }
    reader.readAsDataURL(input.files[0]);
}

您需要编辑PHP脚本，使其以JSON格式读取图像的数据URL，然后将数据URL保存为图像文件。它应该是这样的：

<?php
    function upload()
    {
        if(isset($_POST))
        {
            // Get the image data URL
            $imageData = $_POST['imageData'];

            // Replace the spaces with plus signs
            $imageData = str_replace(' ', '+', $imageData);

            // Decode the image data
            $imageData = base64_decode($imageData);

            // Path where you want to save the image
            $uri = "/image.png";

            // Save the image data to an image file on the server
            file_put_contents($imageData, $uri);

        }
    }
?>

为什么在Post期间将JQuery加载到PHP页面中？

1 个答案: