HTML表单使用两个JS脚本,但只调用一个

时间:2017-02-08 22:18:44

标签: javascript php jquery html ajax

我有一个获取输入的HTML表单,然后使用ajax脚本将其作为JSON发送。在此表单中是使用PHP和另一个JS脚本将图像上载到Web服务器的另一种形式。我遇到的问题是当我点击上传文件时#39;按钮它使用JSON帖子的功能,但没有使用PHP / JS将图像上传到网络服务器。

我尝试将两种形式的enctype组合成一种,但这似乎不起作用。它击中了第一种形式并且似乎没有继续到下一种形式。有没有办法结合这个?或者它是如语法错误一样简单。

HTML表单:

                <div id="createModal" class="modal fade" role ="dialog">
                    <div class="modal-dialog modal-lg">
                        <!--Modal content-->
                        <div class="modal-content">
                            <div class="modal-header" style="text-align: center">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Create New Listing</h4>
                            </div>
                            <div class="modal-body">
                                <div style="text-align: left">

                                    <form enctype='application/json' style="text-align: center" method="post" name="form" id="form" onsubmit="submitForms()">
                                        <input name="seller" value="" type="text" class="form-control" placeholder="First and Last Name"> &nbsp
                                        <input name="email" value="" type="text" class="form-control" placeholder="Email"> &nbsp
                                        <select name="category" value="" class="form-control">
                                            <option selected disabled value="choose">--Category--</option>
                                            <option value="furniture">Furniture</option>
                                            <option value="books">Books</option>
                                            <option value="music">Music</option>
                                        </select> &nbsp
                                        <input name="item" value="" type="text" class="form-control" placeholder="Item Name"> &nbsp
                                        <input name="itemdesc" value="" type="text" class="form-control" placeholder="Item Description"> &nbsp
                                        <input name="model" value="" type="text" class="form-control" placeholder="Model"> &nbsp
                                        <input name="price" value="" type="text" class="form-control" placeholder="Price ($00.00)"> &nbsp
                                    </form>


                                    <h2> Image Upload </h2>
                                    <form enctype='multipart/form-data' action='' method='POST' name="uploadForm" id="uploadForm" onsubmit="submitForms()">
                                        Only JPEG, PNG, JPG types allowed. Image size should be less than 100KB.
                                        <br/><br/>
                                        <div id="filediv"><input name="file[]" type="file" id="file"/></div>
                                        <br/><br/>
                                        <input type="button" id="add_more" class="upload" value="Add More Files"/>
                                        <!--<input type="submit" value="Upload File" name="upload_submit" id="upload_submit" class="upload"/>-->

                                        <!--- Including PHP Script -->
                                        <?php include 'upload.php'; ?>


                                        <div class="modal-footer">
                                            <input type="submit" class="btn btn-default" value='Submit'/>
                                        </div>
                                    </form>

                                    <script>

                                    var success = ("The forms were submitted");

                                    function submitForms()
                                    {

                                        document.getElementById("form").submit();
                                        document.getElementById("uploadForm").submit();

                                        console.log(success);
                                        alert(success);
                                    }

                                    </script>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <script src="js/script.js"></script>
                <script src="js/json.js"></script>

JSON Ajax:

var form = document.forms['form'];

form.onsubmit = function (e) {
    //stop regular form submission
    e.preventDefault();

    //collect the form data 
    var data = {};
    for (var i = 0, ii = form.length; i <ii; ++i) {
        var input = form[i];
        if (input.name) {
            data[input.name] = input.value;
        }
    }

    //console.log(JSON.stringify(data));
    //construct an HTTP request
    var url = [removed]

        $.ajax({
                url: url,
                type: 'POST',
                crossDomain: true,
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: "application/json",
                success: function (response) {
                    var resp = JSON.parse(response)
                    alert(resp.status);
                },
                error: function (xhr, status) {
                    alert("error");
                }
        });
        //console.log(JSON.stringify(data))
        //console.log(url);

};

上传PHP:

<?php
if (isset($_POST['upload_submit'])) {
    $j = 0;         // Variable for indexing uploaded image
    $target_path = "/tmp/uploads";  // Declaring path for uploaded images.
    for ( $i = 0; $i < count($_FILES['file']['name']); $i++) {
        // Loop to get individual element from the array
        $validextensions = array("jpeg","jpg","png");  // Extensions that are allowed
        $ext = explode('.', basename($_FILES['file']['name'][$i]))  // Explode file name from dot (.)
        $file_extension = end($ext); // Store extentions in the variable
        $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext) - 1]; //Set the target path with the name of the image
        $j = $j + 1; // Increment the number of uploaded images according to the files in the array
        if (($_FILES["file"]["size"][$i] < 100000) // Approx. 100kb files can be uploaded
        && in_array($file_ectensions, $validextensions)) {

            if (move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {

                // If file moved to uploads folder
                echo $j. ').<span id="noerror">Image uploaded successfully!. </span><br/><br/>';
            } else {    // If File was not moved.
                echo $j. '). <span id="error">Please try again!.<span><br/><br/>';
            }
        } else {        // If file size and File type incorrect.
            echo $j. ').<span id="error"> Invalid file Size or Type</span>       <br/><br/>';
        }
    }
}
?>

感谢您对此提供任何帮助。

0 个答案:

没有答案