Question

我选择一张图片，写点东西，然后点击提交。一旦我点击提交它发布到数据库，显示成功上传的进度条但是从不调用upload.php文件。

问题：我的代码出了什么问题，就是阻止在$('#feed_form').submit(function(e) { var data = new FormData(this); var url = $(this).attr("action"); if($('#file12').val()) { $("#progress-div").show("slow"); e.preventDefault(); $.ajax({ type: "POST", url: "scripts/universal/upload.php", data: data, processData: false, contentType: false, success: function() { $("#success_post").slideDown(); setTimeout(function() { $('#success_post').slideUp(); }, 3000); }, uploadProgress: function (event, position, total, percentComplete){ $("#progress-bar").width(percentComplete + '%'); $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>') }, resetForm: true }); return false; } });中调用upload.php文件。

它在某个时间点工作，但我无法记住我为此做出的改变。

更新的脚本：

＆＃13;

<form name="feed_form" id="feed_form" method="post" enctype="multipart/form-data">
    <textarea class="list-group-item p-x-md" id="textarea_writing" name="textarea_writing" style="resize:none;padding:5px;width:100%;" placeholder="What's going on....."></textarea>
    <script type="text/javascript">
        var textarea = document.getElementById("textarea_writing");
        textarea.oninput = function() {
            textarea.style.height = "";
            textarea.style.height = Math.min(textarea.scrollHeight, 300) + "px";
        };
    </script>
    <span id="show_error_message"></span>
    <br>
    <label class="custom-file" style="width:100%;">
        <input type="file" name="file12" id="file12" class="custom-file-input" onchange="setfilename(this.value);" accept=".jpg, .jpeg, .gif, .png, .mp4" required>
        <span class="custom-file-control">Select photo, video or gif...</span>
    </label>
    <br><br>
    <button type="submit" id="btnSubmitFormClick">Post</button>
</form>

＆＃13;

  if(!empty($_FILES)) {
        if(is_uploaded_file($_FILES['file12']['tmp_name'])) {
            $sourcePath = $_FILES['file12']['tmp_name'];
            $targetPath = "images/uploads/".$_FILES['file12']['name'];
            move_uploaded_file($sourcePath,$targetPath);
            shell_exec("ffmpeg -f mp4 -i images/uploads/".$_FILES['file12']['name']." -ss 00:00:5.000 -vframes 1 images/uploads/".basename($_FILES['file12']['name'], ".mp4").".png");
           //This line does not affect the code, it works perfectly fine when I try it with some different JS
        }
    }

＆＃13;

PHP：

  public abstract class EndlessRecyclerOnScrollListener extends RecyclerView.OnScrollListener {
    public String TAG = EndlessRecyclerOnScrollListener.class.getSimpleName();

    private int previousTotal = 0; // The total number of items in the dataset after the last load
    // True if we are still waiting for the last set of data to load.
    private int visibleThreshold = 0; // The minimum amount of items to have below your current scroll position before loading more.
    int firstVisibleItem, visibleItemCount, totalItemCount;

    private int current_page = 0;

    private GridLayoutManager mLinearLayoutManager;

    public EndlessRecyclerOnScrollListener(GridLayoutManager linearLayoutManager) {
      this.mLinearLayoutManager = linearLayoutManager;
    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
      super.onScrolled(recyclerView, dx, dy);
      visibleItemCount = recyclerView.getChildCount();
      totalItemCount = mLinearLayoutManager.getItemCount();
      firstVisibleItem = mLinearLayoutManager.findFirstVisibleItemPosition();
      Log.i("ProdctOffer load", mLinearLayoutManager.findLastCompletelyVisibleItemPosition() + "//" + ProductList.size() + "//" + loading);
      if (mLinearLayoutManager.findLastCompletelyVisibleItemPosition() == ProductList.size() - 1 && loading) {
        //bottom of list!
        current_page++;
        onLoadMore(current_page);
      }
    }

    public abstract void onLoadMore(int current_page);
  }

Answer 1

您尚未在$.ajax()中指定网址。也许这是唯一的问题

以下是更正的代码，请尝试并告知我是否有效

<script type="text/javascript">
    $(document).ready(function () {
        $('#feed_form').submit(function (e) {
            var url = $(this).attr("action");
            var data = new FormData(this);
            if ($('#file12').val()) {
                if (!$("#btnSubmitFormClick").val()) {
                    $("#show_error_message").innerHTML = "Please write something before clicking submit";
                } else {
                    $("#progress-div").show("slow");
                    e.preventDefault();
                    $.ajax({
                        url: url,
                        data: data,
                        cache: false,
                        processData: false,
                        contentType: false,
                        success: function () {
                            $("#success_post").show();
                        },
                        uploadProgress: function (event, position, total, percentComplete) {
                            $("#progress-bar").width(percentComplete + '%');
                            $("#progress-bar").html('<div id="progress-status">' + percentComplete + ' %</div>')
                        },
                        resetForm: true
                    });
                    return false;
                }
            }
        });
        $("#btnSubmitFormClick").click(function () {
            document.getElementById("close_status_modal").click();
        });
        $("#feed_form").submit(function (e) {
            $.ajax({
                type: "POST",
                url: "scripts/universal/post.php",
                data: $("#feed_form").serialize(), // serializes the form's elements.
                success: function (data) {
                    $('#textarea_writing').val('');
                }
            });
            e.preventDefault(); // avoid to execute the actual submit of the form.
        });
    });
</script>
<form name="feed_form" id="feed_form" action="upload.php" method="post" enctype="multipart/form-data">
    <textarea class="list-group-item p-x-md" id="textarea_writing" name="textarea_writing" style="resize:none;padding:5px;width:100%;" placeholder="What's going on....."></textarea>
    <script type="text/javascript">
        var textarea = document.getElementById("textarea_writing");
        textarea.oninput = function () {
            textarea.style.height = "";
            textarea.style.height = Math.min(textarea.scrollHeight, 300) + "px";
        };
    </script>
    <span id="show_error_message"></span>
    <br>
    <label class="custom-file" style="width:100%;">
        <input type="file" name="file12" id="file12" class="custom-file-input" onchange="setfilename(this.value);" accept=".jpg, .jpeg, .gif, .png, .mp4" required>
        <span class="custom-file-control">Select photo, video or gif...</span>
    </label>
    <br><br>
    <button type="submit" id="btnSubmitFormClick" style="display:none;">Post</button>
</form>

Answer 2

I ended up using the following code to solve my problem:

function _(el) {
    return document.getElementById(el);
}
function uploadFile() {
    var file = _("file12").files[0];
    var formdata = new FormData();
    formdata.append("file12", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.open("POST", "scripts/universal/upload.php");
    ajax.send(formdata);
}
function progressHandler(event) {
    var percent = (event.loaded / event.total) * 100;
    $("#progress-div").show();
    _("progressBar").value = Math.round(percent);
}
function completeHandler(event) {
    _("progressBar").value = 0;
    $("#progress-div").hide();
}

在AJAX请求中没有调用upload.php

2 个答案: