问在PHP中ajax成功后，如何设置空图像文件？
EN

Stack Overflow用户

提问于 2021-02-25 09:57:07

回答 1查看 291关注 0票数 0

我正在研究ajax和PHP。当我单击post按钮时，消息值将删除$("# message ").val("")；ajax成功后(数据通过PHP和ajax插入数据库)，但是文件(浏览)在成功后不会删除。在AJAX成功后，文件应该是空的，如果我离开图像，则不会运行ajax代码。我想留下一个图像和消息应该插入没有图像和与图像一起工作。

            $(document).on("click", "#save", function (e) {
           e.preventDefault();
                var form_data = new FormData();
form_data.append('message', message)

      var property = document.getElementById('photo').files;

属性=属性；如果(属性){//必须检查文件是否存在，否则它将无法从未定义的对象访问属性。

    var image_name = property.name;
    var image_extension = image_name.split('.').pop().toLowerCase();
    form_data.append("file",property);
}
                //Ajax call to send data to the insert.php
                $.ajax({
                    type: "POST",
                    url: "insert_posts.php",
                    data: form_data,
                   contentType:false,
          cache:false,
          processData:false,
                    success: function (data) {
                        //Insert data before the message wrap div
                        $(data).insertBefore(".message-wrap:first");
                        //Clear the textarea message
                        $("#message").val("");
                    
                    $("#form")[0].reset(); 
                    $('#preview').attr('src', "#");
                    $("#photo").val("");


                    }
                });
            });

当我离开图像文件时，post按钮不能工作。但是，当我将文本保留为空白并从计算机中选择图像时，post按钮就可以工作了。我希望当我离开浏览文件时，post按钮应该是工作的。在ajax成功之后，文件浏览应该是空的。

<div class="c-header">
                        <div class="c-h-inner">
                            <ul>    
                                
                                <li><input type="file"  onchange="readURL(this);" style="display:none;" name="photo" id="photo"></li>
                                <li><img src="assets/icon/icon1.png"></img><a href="#" id="uploadTrigger" name="post_image">Add Photo</a></li>
                                
                            </ul>
                        </div>
                    </div>
                    <div class="c-body">
                        <div class="body-left">
                            <div class="img-box">
                                <img src="<?php echo 'assets/images/'.$image;?>"></img>
                                
                            </div>
                        </div>
                        <div class="body-right">
                            <textarea class="text-type" name="message"  id="message"
                     placeholder="What's on your mind?"></textarea>
                        </div>
                        <div id="body-bottom">
                        <img src="#"  id="preview"/>
                        </div>
                    </div>
                    <div class="c-footer">
                        <div class="right-box">
                            <ul>
                            
                                <li><input type="submit" name="save" id="save" value="Post" class="btn2"/></li>
                            </ul>
                            <br>
                        </div>

我使用js显示图像预览。

ew 
<script type="text/javascript">

                         //Image Preview Function
                                $("#uploadTrigger").click(function(){
                                   $("#photo").click();
                                });
                                function readURL(input) {
                                    if (input.files && input.files[0]) {
                                        var reader = new FileReader();

                                        reader.onload = function (e) {
                                            $('#body-bottom').show();
                                            $('#preview').attr('src', e.target.result);
                                        }

                                        reader.readAsDataURL(input.files[0]);
                                    }
                                }

                        </script>

在ajax成功后，图像预览应该是清晰的或删除的，当我离开图像去浏览时，post按钮应该是工作的。

javascript

php

jquery

ajax

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-25 10:09:29

文件输入应该重置，但是需要删除预览图像，如下所示：

var form_data = new FormData();
form_data.append('message', message)

var property = document.getElementById('photo').files;
property = property[0];
if(property){//you have to check if the files exists or it will fail trying to access properties from an undefined object
    
    var image_name = property.name;
    var image_extension = image_name.split('.').pop().toLowerCase();
    form_data.append("file",property);
}


success: function (data) {
                    //Insert data before the message wrap div
                    $(data).insertBefore(".message-wrap:first");
                    //Clear the textarea message
                    $("#message").val("");
                    
                    $("#form")[0].reset(); 
                    $('#preview').attr('src', "#");//Reset the preview to the original state

                }