Question

我有一个用户可以上传个人资料照片的模块。当用户将图片上传到该配置文件时，我想做几件事，但我想尝试分步，第一步是保存图片并上传到服务器。现在，用户可以选择那里的图片就好了，在用户选择了图片之后，它会稍微注意到图片正在上传。我不知道在上传后是否应该显示某些内容，或者它是否应该消失（我加入了一位朋友完成了这个网站，模块已经在这里;我正在尝试完成这些功能，工作）。

这就是它的样子：

我注意到，如果你点击保存，似乎没有任何事情发生。就像保存按钮设置不正确一样。

我怀疑未上传图片的问题是因为“正在上传...”文字或保存按钮无法正常工作。我试图调试，如果$ _FILES正在获取我试图上传的图片，但模块没有重新加载，以允许我看看$ _FILES是否得到任何东西（它没有进入if循环的什么单击保存按钮后发生。

以下是模块本身的代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        </div>

        <div class="modal-body">
        <center>
            <h3>Edit Profile Picture</h3>
            <img src="images/default.png" name="aboutme" width="140" height="140" border="0" class="img-circle"></a></br></br></br></br></br></br></br>

        </center>
        <div class="modal-body">
            <form id="cropimage" method="post" enctype="multipart/form-data" action="upload_pic/change_pic.php">
                <strong>Upload Image:</strong> <br><br>
                <input type="file" name="profile-pic" id="profile-pic" />
                <input type="hidden" name="hdn-profile-id" id="hdn-profile-id" value="1" />
                <input type="hidden" name="hdn-x1-axis" id="hdn-x1-axis" value="" />
                <input type="hidden" name="hdn-y1-axis" id="hdn-y1-axis" value="" />
                <input type="hidden" name="hdn-x2-axis" value="" id="hdn-x2-axis" />
                <input type="hidden" name="hdn-y2-axis" value="" id="hdn-y2-axis" />
                <input type="hidden" name="hdn-thumb-width" id="hdn-thumb-width" value="" />
                <input type="hidden" name="hdn-thumb-height" id="hdn-thumb-height" value="" />
                <input type="hidden" name="action" value="" id="action" />
                <input type="hidden" name="image_name" value="" id="image_name" />
                <div id='preview-profile-pic'></div>
                <div id="thumbs" style="padding:5px; width:600p"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" id="save_crop" class="btn btn-primary">Save</button>
        </div>
    </div></br>
    <div class="container">
        <div id="profile_pic_modal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h3>Upload Profile Picture</h3>
                    </div>
                    <div class="modal-body">
                        <form id="cropimage" method="post" enctype="multipart/form-data" action="upload_and_change.php">
                            <strong>Upload Image:</strong> <br><br>
                            <input type="file" name="profile-pic" id="profile-pic" />
                            <input type="hidden" name="hdn-profile-id" id="hdn-profile-id" value="1" />
                            <input type="hidden" name="hdn-x1-axis" id="hdn-x1-axis" value="" />
                            <input type="hidden" name="hdn-y1-axis" id="hdn-y1-axis" value="" />
                            <input type="hidden" name="hdn-x2-axis" value="" id="hdn-y2-axis" />
                            <input type="hidden" name="hdn-thumb-width" id="hdn-thumb-width" value="" />
                            <input type="hidden" name="hdn-thumb-height" id="hdn-thumb-height" value="" />
                            <input type="hidden" name="action" value="" id="action" />
                            <input type="hidden" name="image_name" value="" id="image_name" />

                            <div id='preview-profile-pic'></div>
                            <div id="thumbs" style="padding:5px; width:600p"></div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" id="save_crop" class="btn btn-primary" name="save">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </br></br></br></br></br>
</div>
</div>
</div>

这是function.js，我认为“Uploading ...”来自：

jQuery(document).ready(function(){
/* When click on change profile pic */  
jQuery('#change-profile-pic').on('click', function(e){
    jQuery('#profile_pic_modal').modal({show:true});        
}); 
jQuery('#profile-pic').on('change', function()  { 
    jQuery("#preview-profile-pic").html('');
    jQuery("#preview-profile-pic").html('Uploading....');
    jQuery("#cropimage").ajaxForm(
    {
    target: '#preview-profile-pic',
    success:    function() { 
            jQuery('img#photo').imgAreaSelect({
            aspectRatio: '1:1',
            onSelectEnd: getSizes,
        });
        jQuery('#image_name').val(jQuery('#photo').attr('file-name'));
        }
    }).submit();

});
/* handle functionality when click crop button  */
jQuery('#save_crop').on('click', function(e){
e.preventDefault();
params = {
        targetUrl: '/upload_pic/change_pic.php?action=save',
        action: 'save',
        x_axis: jQuery('#hdn-x1-axis').val(),
        y_axis : jQuery('#hdn-y1-axis').val(),
        x2_axis: jQuery('#hdn-x2-axis').val(),
        y2_axis : jQuery('#hdn-y2-axis').val(),
        thumb_width : jQuery('#hdn-thumb-width').val(),
        thumb_height:jQuery('#hdn-thumb-height').val()
    };
    saveCropImage(params);
});
/* Function to get images size */
function getSizes(img, obj){
    var x_axis = obj.x1;
    var x2_axis = obj.x2;
    var y_axis = obj.y1;
    var y2_axis = obj.y2;
    var thumb_width = obj.width;
    var thumb_height = obj.height;
    if(thumb_width > 0) {
        jQuery('#hdn-x1-axis').val(x_axis);
        jQuery('#hdn-y1-axis').val(y_axis);
        jQuery('#hdn-x2-axis').val(x2_axis);
        jQuery('#hdn-y2-axis').val(y2_axis);
        jQuery('#hdn-thumb-width').val(thumb_width);
        jQuery('#hdn-thumb-height').val(thumb_height);
    } else {
        alert("Please select portion..!");
    }
}
/* Function to save crop images */
function saveCropImage(params) {
    jQuery.ajax({
        url: params['targetUrl'],
        cache: false,
        dataType: "html",
        data: {
            action: params['action'],
            id: jQuery('#hdn-profile-id').val(),
             t: 'ajax',
                                w1:params['thumb_width'],
                                x1:params['x_axis'],
                                h1:params['thumb_height'],
                                y1:params['y_axis'],
                                x2:params['x2_axis'],
                                y2:params['y2_axis'],
                                image_name :jQuery('#image_name').val()
        },
        type: 'Post',
        success: function (response) {
                jQuery('#profile_pic_modal').modal('hide');
                jQuery(".imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-border2,.imgareaselect-outer").css('display', 'none');

                jQuery("#profile_picture").attr('src', response);
                jQuery("#preview-profile-pic").html('');
                jQuery("#profile-pic").val();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('status Code:' + xhr.status + 'Error Message :' + thrownError);
        }
    });
}
});

我试图将jQuery("#preview-profile-pic").html('Uploading....');行注释掉，但似乎没有删除“正在上传...”文字，但图片仍无法上传。

如果有人能帮我弄清楚模块无法正常工作的原因，我将不胜感激。如果有更简单的方法来获得我想要的功能，请告诉我。

Answer 1

根据我的分析，我确实运行了代码，发现了更多的错误，但以下是首先要解决的关键问题。

您的代码使用分配的头文件，如here所示，该头文件包含CDN jquery文件的所有摘要。如果您在控制台“正在上传...”时打开了控制台，则会注意到此图片中出现了类似的错误

第一印象是没有找到负责此功能的jQuery.form.js文件。如果您进一步确认已正确加载，请在此处使用此功能检查其加载：

 (function() {
var startingTime = new Date().getTime();
// Load the script
var script = document.createElement("SCRIPT");
script.src = 'dist_files/jquery.form.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);

// Poll for jQuery to come into existance
var checkReady = function(callback) {
    if (window.jQuery) {
        callback(jQuery);
    }
    else {
        window.setTimeout(function() { checkReady(callback); }, 20);
    }
};

// Start polling...
checkReady(function($) {
    $(function() {
        var endingTime = new Date().getTime();
        var tookTime = endingTime - startingTime;

        window.alert("jQuery.form is loaded, after " + tookTime + " milliseconds!");
    });
});

}）（）;

如果您要使用此函数检查其功能是否正确加载，然后再加载，则下一个受害者是您的jQuery，这是由于兼容性问题，所使用的jQuery.form.js版本需要jQuery 1.5 .x或更高版本。

其次，如果您在项目中使用了类似的版本，则必须检查与导入没有任何冲突。假设您在配置文件输入之前就已经在其他函数中使用了jQuery，在这种情况下，它随其导入一起出现。

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

那么，您肯定没有jQuery的功能，这意味着jQuery将无法使用，并且，同一个人需要调用jQuery.form.js，现在您将看到相同的错误。因此，请协调您的导入并删除.js导入和.css文件中的所有重复项（尽管当前没有CSS冲突，但仅出于您的信息目的

清理导入文件后（如果您正在使用良好的网络连接进行开发，建议您使用CDN）清除浏览器缓存，并使用“浏览器中的检查元素选项”重做上载。

右键单击浏览器上的空白区域
选择“检查元素”
将检查器切换到“控制台”，您将可以看到错误（如果有）。

您的最终结果应该可以正常工作并获得以下信息：

配置文件图片模块上的保存按钮不起作用或模块卡在“正在加载...”PHP

1 个答案: