上传失败,图片大于800kb

时间:2014-01-30 17:22:50

标签: javascript php jquery upload

我有一个表单,我可以将图像拖放到画布中,然后单击上传按钮将文件上传到服务器。下面是我的javascript文件和php文件。我找不到在哪里或为什么这不允许我上传超过800kb的东西?我相信它在if中的所有失败if(file_put_contents($ uploaddir。$ randomName,$ decodingData)){但我又不知道为什么? sql语句无法顺便说明为什么我认为它在php文件中失败了。 32M是php max文件大小上传。

UPDATE ... 我删除了与php上传的任何事情,只留下了echo $randomName.":uploaded successfully";现在让我相信在$.post('/mods/photogallery/manager/upload.php?gpID=' + bla, dataArray[index], function(data) {的JS文件中出现了问题{1}}任何大于800kb(ish)的东西

JS

$(document).ready(function() {

    // Makes sure the dataTransfer information is sent when we
    // Drop the item in the drop box.
    jQuery.event.props.push('dataTransfer');

    var z = -40;
    // The number of images to display
    var maxFiles = 1;
    var errMessage = 0;

    // Get all of the data URIs and put them in an array
    var dataArray = [];

    // Bind the drop event to the dropzone.
    $('#drop-files').bind('drop', function(e) {

        // Stop the default action, which is to redirect the page
        // To the dropped file

        var files = e.dataTransfer.files;

        // Show the upload holder
        $('#uploaded-holder').show();
        $('#drop-files').hide();

        // For each file
        $.each(files, function(index, file) {

            // Some error messaging
            if (!files[index].type.match('image.*')) {

                if(errMessage == 0) {
                    $('#drop-files').html('Hey! Images only');
                    ++errMessage
                }
                else if(errMessage == 1) {
                    $('#drop-files').html('Stop it! Images only!');
                    ++errMessage
                }
                else if(errMessage == 2) {
                    $('#drop-files').html("Can't you read?! Images only!");
                    ++errMessage
                }
                else if(errMessage == 3) {
                    $('#drop-files').html("Fine! Keep dropping non-images.");
                    errMessage = 0;
                }
                return false;
            }

            // Check length of the total image elements

            if($('#dropped-files > .image').length < maxFiles) {
                // Change position of the upload button so it is centered
                var imageWidths = ((220 + (40 * $('#dropped-files > .image').length)) / 2) - 20;
                $('#upload-button').css({'left' : imageWidths+'px', 'display' : 'block'});
            }

            // Start a new instance of FileReader
            var fileReader = new FileReader();

                // When the filereader loads initiate a function
                fileReader.onload = (function(file) {

                    return function(e) { 

                        // Push the data URI into an array
                        dataArray.push({name : file.name, value : this.result});

                        // Move each image 40 more pixels across
                        z = z+40;
                        var image = this.result;


                        // Just some grammatical adjustments
                        if(dataArray.length == 1) {
                            $('#upload-button span').html("1 file to be uploaded");
                        } else {
                            $('#upload-button span').html(dataArray.length+" files to be uploaded");
                        }
                        // Place extra files in a list
                        if($('#dropped-files > .image').length < maxFiles) { 
                            // Place the image inside the dropzone
                            $('#dropped-files').append('<div class="image" style="background: #fff url('+image+') no-repeat;background-size: cover;background-position: center center;"> </div>'); 
                        }
                        else {

                            $('#extra-files .number').html('+'+($('#file-list li').length + 1));
                            // Show the extra files dialogue
                            $('#extra-files').show();

                            // Start adding the file name to the file list
                            $('#extra-files #file-list ul').append('<li>'+file.name+'</li>');

                        }
                    }; 

                })(files[index]);

            // For data URI purposes
            fileReader.readAsDataURL(file);

        });


    });

    function restartFiles() {

        // This is to set the loading bar back to its default state
        $('#loading-bar .loading-color').css({'width' : '0%'});
        $('#loading').css({'display' : 'none'});
        $('#loading-content').html(' ');
        // --------------------------------------------------------

        // We need to remove all the images and li elements as
        // appropriate. We'll also make the upload button disappear

        $('#upload-button').hide();
        $('#dropped-files > .image').remove();
        $('#extra-files #file-list li').remove();
        $('#extra-files').hide();
        $('#uploaded-holder').hide();
        $('#drop-files').show();

        // And finally, empty the array/set z to -40
        dataArray.length = 0;
        z = -40;

        return false;
    }

    $('#upload-button .upload').click(function() {

        $("#loading").show();
        var totalPercent = 100 / dataArray.length;
        var x = 0;
        var y = 0;

        $('#loading-content').html('Uploading '+dataArray[0].name);

        $.each(dataArray, function(index, file) {   
            bla = $('#gpID').val();


            $.post('/mods/photogallery/manager/upload.php?gpID=' + bla, dataArray[index], function(data) {

                var fileName = dataArray[index].name;
                ++x;

                // Change the bar to represent how much has loaded
                $('#loading-bar .loading-color').css({'width' : totalPercent*(x)+'%'});

                if(totalPercent*(x) == 100) {
                    // Show the upload is complete
                    $('#loading-content').html('Uploading Complete!');

                    // Reset everything when the loading is completed
                    setTimeout(restartFiles, 500);

                } else if(totalPercent*(x) < 100) {

                    // Show that the files are uploading
                    $('#loading-content').html('Uploading '+fileName);

                }

                // Show a message showing the file URL.
                var dataSplit = data.split(':');
                if(dataSplit[1] == 'uploaded successfully') {
                    alert('Upload Was Successfull');
                    var realData = '<li><a href="/mods/photogallery/photos/'+dataSplit[0]+'">'+fileName+'</a> '+dataSplit[1]+'</li>';



                    $('#drop-files').css({
    'background' :'url(/mods/photogallery/photos/' + dataSplit[0] + ') no-repeat',                      
    'background-size': 'cover',
   'background-position' : 'center center'
});

                    $('#uploaded-files').append('<li><a href="/mods/photogallery/photos/'+dataSplit[0]+'">'+fileName+'</a> '+dataSplit[1]+'</li>');

                    // Add things to local storage 
                    if(window.localStorage.length == 0) {
                        y = 0;
                    } else {
                        y = window.localStorage.length;
                    }

                    window.localStorage.setItem(y, realData);

                } else {
                    $('#uploaded-files').append('<li><a href="/mods/photogallery/photos/'+data+'. File Name: '+dataArray[index].name+'</li>');
                }

            });
        });

        return false;
    });

    // Just some styling for the drop file container.
    $('#drop-files').bind('dragenter', function() {
        $(this).css({'box-shadow' : 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)', 'border' : '4px dashed #bb2b2b'});
        return false;
    });

    $('#drop-files').bind('drop', function() {
        $(this).css({'box-shadow' : 'none', 'border' : '4px dashed rgba(0,0,0,0.2)'});
        return false;
    });

    // For the file list
    $('#extra-files .number').toggle(function() {
        $('#file-list').show();
    }, function() {
        $('#file-list').hide();
    });

    $('#dropped-files #upload-button .delete').click(restartFiles);

    // Append the localstorage the the uploaded files section
    if(window.localStorage.length > 0) {
        $('#uploaded-files').show();

        for (var t = 0; t < window.localStorage.length; t++) {
            var key = window.localStorage.key(t);
            var value = window.localStorage[key];
            // Append the list items
            if(value != undefined || value != '') {
                $('#uploaded-files').append(value);
            }
        }
    } else {
        $('#uploaded-files').hide();

    }
});

PHP

// We're putting all our files in a directory.
$uploaddir = '../photos/';

// The posted data, for reference
$file = $_POST['value'];
$name = $_POST['name'];
$gpID = $_GET['gpID'];

// Get the mime
$getMime = explode('.', $name);
$mime = end($getMime);

// Separate out the data
$data = explode(',', $file);

// Encode it correctly
$encodedData = str_replace(' ','+',$data[1]);
$decodedData = base64_decode($encodedData);

// You can use the name given, or create a random name.
// We will create a random name!

$randomName = $gpID.'.'.$mime;




if(file_put_contents($uploaddir.$randomName, $decodedData)) {

$sql = "UPDATE zmods_galleriesphotos SET gpFile = '$randomName' WHERE gpID = '$gpID'";
$rows = $db->query($sql);




echo $randomName.":uploaded successfully";  


}
else {

echo "Something went wrong. Check that the file isn't corrupted";

}

1 个答案:

答案 0 :(得分:0)

  1. 检查php.ini文件中的upload_max_filesize(虽然默认情况下应该足够大)
  2. 同时检查post_max_size
  3. 如果您要上传多个文件,请同时检查max_file_uploads
  4. 你的sql失败的事实让我想知道这是一个mysql问题而不是php问题。发生什么SQL错误?