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

我正在研究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;

属性=属性[0]； ifproperty{//您必须检查文件是否存在，否则它将无法从未定义的对象访问属性

    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按钮应可用。

文件输入应重置，但您需要删除预览图像，如：

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

                }

---

如果文件输入未重置，请尝试在成功函数中添加$photo.val；。

两者都不起作用。ajax成功后会出现图像预览。消息会重置，但ajax成功后会出现预览。由于ajax正确，表单似乎没有使用ajax。请尝试防止默认设置，看看这是否会修复问题问题。$document.onclick，save，函数e{e.preventDefault；…它也不起作用。我已经更新了答案@ShivaIt's solved.Place property=property[0]；在ifproperty{}条件之外。谢谢。请将代码示例减少到显示问题所需的最小值。