javascript - JQuery 图像上传不适用于 future 的事件

Question

我希望我的用户可以通过帖子上传图像。因此，每个回复表单都有一个上传表单。用户可以通过点击上传按钮上传图片，然后点击提交来提交帖子。

现在我的上传表单可以上传第一个回复的图片，但第二个回复的图片无法上传。

我的提交过程:Ajax 在通过 php 提交每个回复后附加一个带有自己的动态 id 的新回复表单。

因此，在提交第一个回复后，我无法在第二个或进一步的回复中上传任何图像。但图像预览在这里效果很好。如果我点击上传页面正在刷新。

这是我的上传脚本:(这里888是我当前的id，由php动态设置)

$(document).on('click', '.uploadReply', function(){
    $("#show_img_upload_rep").slideToggle('slow');
    $('.upfrmrep').show();
});

//Problem is here to upload image
//	$(document).on('submit','.upload_Reply',function (e)
$('.upload_Reply').on('submit', function(e){
    e.preventDefault();
    var EID = $(this).attr('id');
    $('.loading').show();
        $.ajax({
        type:"post",
        url:"../upload.php",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
            success: function(response){
            $('#img'+ EID).attr('value', response);
        }
    });
    return false;
});

//preview image
$(document).on('change','.repfile',function (){
    previewPic(this);
});

function previewPic(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();
        reader.onload = function (e) {
        $("#preview_rep"+ input.id).attr('src', e.target.result);
        $("#output_rep"+ input.id).show();
        };
    reader.readAsDataURL(input.files[0]);
    }
}

    .replyform {
        top:50px;
    	position:relative;
    	min-height: 38px;
    	width: 100%;
    }
    div.chat {
        width: 90%;
    }

    .replycom {
        font-family:Times New Roman, Times, serif;
    	font-size:12px;
      	min-height: 25px;
      	color:#000;
      	top:0; left:0; z-index:998; background: transparent;
    	border: 2px solid #ccc;
    	position:relative;
    	float:left;
        width:100%;
        margin: 0;
        resize: none;
        padding-right:50px;
    	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #right {
        position:absolute;
        top: 8px;
        right:0px;
        height: 35px;
        line-height: 35px;
        width: 50px;
        z-index:999;
    }
    #right img {
        cursor:pointer;
        vertical-align: middle;
        width:20px;
    }

    <div class="replyform">
        <ul>
            <form action="" method="post" class="repfrm888" id="prepfrm">
            <fieldset id="cmntfs">
                <input type="hidden" name="username" id="author" value="'.$_SESSION['username'].'"/>
                <div class="maintbox">
                    <div class="chat">
                    <textarea name="replycom" id="replycom888" class="replycom" placeholder="Type your comment ..."></textarea>
                    </div>
                    <div id="right">
                    <img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png" class="uploadReply" id="888"/>
                    </div>
            </form>
                 <div align="left" id="show_img_upload_rep" class="show_img_upload_rep" style="align:left; text-align:left; float:left; margin-top:0px; display:none">
                   
                 <div class="upfrmrep">
					<div id="output_rep888" style="display:none;">
        			<img id="preview_rep888" src="" alt="No Image Found"/>
    				</div>
    				<form class="upload_Reply" id="888'" method="post" enctype="multipart/form-data">
        			<label for="file" style="margin:5px 10px;font-size:12px;font-weight:bold;float:left;">Filename (Max 200 Kb) :  </label>
        			<input type="file" name="file" class="repfile" id="888" value="" style="margin:5px 10px;float:left;font-size:12px;font-weight:bold;"/> 
        			<input type="submit" class="upload_repimg" id="888" name="upload_btn" value="Upload Picture"/>
    				</form>
				</div>
                 </div>
                 </div>
            <button type="submit" name="submitrep" value="" id="repl888" class="replyfrm">Post Reply</button>
        </fieldset>
        </ul>
    </div>
      
    <script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>

Answer 1

您可能需要重置文件表单:

$("form.upload_Reply")[0].reset();
$("form.upload_Reply").trigger("reset");

此外，您还可以从 AJAX 调用中获取更多调试信息。尝试将错误/成功数据写入控制台:

$('.upload_Reply').on('submit', function(e){
    e.preventDefault();
    var EID = $(this).attr('id');
    $('.loading').show();
        $.ajax({
        type:"post",
        url:"../upload.php",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function(response, statusText, xhr){
            console.log(response);
            console.log(statusText);
            console.log(xhr);
            $('#img'+ EID).attr('value', response);
        },
        error: function(xhr, statusText, errorThrown){
            console.log(errorThrown);
            console.log(statusText);
            console.log(xhr);
        },
    });
    return false;
});