Question

我正在为网页上的新闻文章建立CMS，已经构建了CMS以添加新文章，现在我希望为每篇文章添加一个图像，只有一个而不是多个。问题是我的修改后的脚本仅处理了图像，而不是（仅在当前）短标题。

我的第二个问题是，尽管在模态上的“选择文件”输入中选择了文件名，但文件确实没有上传并存储在首选目录中。

HTML代码-index.html

            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#uploadModal">Upload file</button>

            <!--  Add News Modal -->
            <div id="uploadModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">File upload form</h4>
            </div>
            <div class="modal-body">
            <!-- Add News Form -->
            <form method="post" action="" id="add_news" enctype="multipart/form-data">

            <div class="form-group">
            <label for="short_headline">Headline</label>
            <input type="text" class="form-control" id="short_headline" name="short_headline" value=" " />
            </div>


            <div class="custom-file">
            <input type="file" class="custom-file-input" name="file" id="file">
            <label class="custom-file-label" for="customFile">Choose file</label>
            </div>


            <input type="button" class="btn btn-info" data-dismiss="modal" value="Upload" id="upload">
            </form>


            </div>

            </div>

            </div>
            </div>

JavaScript

            <script>
            $(document).ready(function(){
            $('#upload').click(function(){

            var fd = new FormData();
            var files = $('#file')[0].files[0];
            var short_headline = $("input#short_headline").val();
            fd.append('file',files);
            fd.append('short_headline', String);

            // AJAX request
            $.ajax({
            url: 'process.php',
            type: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success: function(response){
            if(response != 0){
            // Show image preview
            alert('file uploaded');
            $('#preview').append("<img src='"+response+"' width='200' height='auto' style='display: inline-block;'>");
            }else{
            alert('file not uploaded');
            }
            }
            });
            });
            });

            </script>

PHP-process.php

            <?php

            // file name and headline
            $filename = $_FILES['file']['name'];
            $short_headline = $_POST['short_headline'];

            // Location
            $location = 'uploads/'.$filename;

            // file extension
            $file_extension = pathinfo($location, PATHINFO_EXTENSION);
            $file_extension = strtolower($file_extension);

            // Valid image extensions
            $image_ext = array("jpg","png","jpeg","gif");

            $response = 0;
            if(in_array($file_extension,$image_ext)){
            // Upload file to new directory
            if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
            $response = $location;
            }
            }

            $query = mysqli_query($connect, "INSERT INTO `latest_news` (`short_headline`, `plain_image`) VALUES ('$short_headline','$location')");

            echo $response;
            ?>

这可能是一个简单的“我看不见树木的树木，但最欢迎使用任何指针。

大礼帽

如何修改Ajax脚本以处理文件和表单数据

0 个答案: