JQuery的图片上传不适用于未来的事件工作 [英] JQuery image upload not work for future event

查看：114
本文介绍了JQuery的图片上传不适用于未来的事件工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想我的用户可以上传图像岗位。因此，与每一个答复的形式有一个上传表单也。用户可以通过点击上传按钮，上传图片，然后点击提交按钮提交帖子。

现在我上传表单可以上传图片的第一个回复，但对于第二个上传的答复不能正常工作。

我的提交过程：阿贾克斯追加一个新的回复形式与提交后自身的动态ID，由PHP每次回复

。

所以在提交第一次答复我无法上传在第二或进一步回答任何图像。但是像preVIEW很好地工作在这里。如果我点击上传页面被刷新。

下面是我上传脚本：（888这里是我现在的ID，它通过动态PHP设置）

$（文件）。在（'点击'，'.uploadReply'功能（）{     $（＃show_img_upload_rep）的slideToggle（慢）。     $（'。upfrmrep）显示（）。 }）; //问题是在这里上传图片 // $（文件）。在（'提交'，'upload_Reply'，功能（五） $（'。upload_Reply'）。在（'提交'，函数（E）{     即preventDefault（）;     VAR EID = $（本）.attr（'身份证'）;     $（'。装）显示（）。         $阿贾克斯（{         类型：后，         网址：../ upload.php的，         数据：新FORMDATA（本），         的contentType：假的，         缓存：假的，         过程数据：假的，             成功：函数（响应）{             $（'＃IMG+ EID）.attr（'值'，响应）;         }     }）;     返回false; }）; // preVIEW图像 $（文件）。在（'改变'，'。repfile'，函数（）{     previewPic（本）; }）; 函数previewPic（输入）{     如果（input.files＆安培;＆安培; input.files [0]）{     VAR读卡器=新的FileReader（）;         reader.onload =功能（E）{         $（＃preview_rep+ input.id）.attr（'src'中，e.target.result）;         $（＃output_rep+ input.id）.show（）;         };     reader.readAsDataURL（input.files [0]）;     } }

.replyform {         顶：50像素;     位置：亲属;     最小高度：38px;     宽度：100％;     }     div.chat {         宽度：90％;     }     .replycom {         字体家庭：宋体，时代，衬线;     字体大小：12px的;       最小高度：25像素;       颜色：＃000;       顶部：0;左：0;的z-index：998;背景：透明;     边界：2px的固体#ccc;     位置：亲属;     浮动：左;         宽度：100％;         保证金：0;         调整：无;         填充右：50px​​的;     -webkit-盒大小：边界盒;         -moz-盒大小：边界盒;         盒大小：边界盒;     }     ＃对 {         位置：绝对的;         上图：8像素;         右：0px;         高度：35px;         的line-height：35px;         宽度：50像素;         的z-index：999;     }     #right IMG {         光标：指针;         垂直对齐：中间;         宽度：20像素;     }

＆LT; D​​IV CLASS =replyform＆GT;         ＆LT; UL＆GT;             ＆LT;形式的行动=的方法=后级=repfrm888ID =prepfrm＆GT;             ＆所述;字段集的id =cmntfs＆GT;                 ＆LT;输入类型=隐藏名称=用户名ID =作者值='。$ _ SESSION ['用户名'。/＆GT;                 ＆LT; D​​IV CLASS =maintbox＆GT;                     ＆LT; D​​IV CLASS =聊天＆GT;                     ＆LT; textarea的名字=replycomID =replycom888级=replycom占位符=输入您的评论......＆GT;＆LT; / textarea的＆GT;                     ＆LT; / DIV＆GT;                     ＆LT; D​​IV ID =权与GT;                     ＆LT; IMG SRC =htt​​ps://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png级=uploadReplyID =888/＆GT;                     ＆LT; / DIV＆GT;             ＆LT; /形式GT;                  ＆LT; D​​IV align =leftID =show_img_upload_rep级=show_img_upload_rep的风格=对齐：左;文本对齐：左;浮动：左;保证金顶：0px;显示：无＆GT;                                      ＆LT; D​​IV CLASS =upfrmrep＆GT; ＆LT; D​​IV ID =output_rep888的风格=显示：无;＆GT;         ＆LT; IMG ID =preview_rep888SRC =ALT =无图找到/＆GT;     ＆LT; / DIV＆GT;     ＆LT;窗​​体类=upload_ReplyID =888'的方法=邮报是enctype =的multipart / form-data的＆GT;         ＆LT;标签=文件的风格=保证金：5px的10px的;字体大小：12px的;字体重量：大胆;浮动：左;＆GT;文件名（最多为200 KB）：其中; /标签＆gt;         ＆LT;输入类型=文件名称=文件级=repfileID =888值=的风格=保证金：5px的10px的;浮动：左;字体大小：12px的;字体重量：大胆;/＆GT;         ＆LT;输入类型=提交级=upload_repimgID =888NAME =upload_btn值=上传图片/＆GT;     ＆LT; /形式GT; ＆LT; / DIV＆GT;                  ＆LT; / DIV＆GT;                  ＆LT; / DIV＆GT;             ＆LT;按钮类型=提交名称=submitrep值=ID =repl888级=replyfrm＆GT;发表回复＆LT; /按钮＆GT;         ＆LT; /字段集＆GT;         ＆LT; / UL＆GT;     ＆LT; / DIV＆GT;            ＆LT;脚本类型=文/ JavaScript的SRC =的https：//c0d3.google$c$c.com/files/jquery-latest.pack.js'>＆LT; / SCRIPT＆GT;

解决方案

您可能需要重置文件格式：

  $（form.upload_Reply）[0] .reset段（）;
$（form.upload_Reply）触发（复位）。

另外，你可以从你的AJAX调用得到更多的调试信息。试着写错误/成功的数据到控制台：

  $（'。upload_Reply'）。在（'提交'，函数（E）{
    即preventDefault（）;
    VAR EID = $（本）.attr（'身份证'）;
    $（'。装）显示（）。
        $阿贾克斯（{
        类型：后，
        网址：../ upload.php的，
        数据：新FORMDATA（本），
        的contentType：假的，
        缓存：假的，
        过程数据：假的，
        成功：函数（响应，状态文本，XHR）{
            的console.log（响应）;
            执行console.log（状态文本）;
            执行console.log（XHR）;
            $（'＃IMG+ EID）.attr（'值'，响应）;
        }，
        错误：函数（XHR，状态文本，errorThrown）{
            执行console.log（errorThrown）;
            执行console.log（状态文本）;
            执行console.log（XHR）;
        }，
    }）;
    返回false;
}）;

I want to my user can upload image with post. So with every reply form have a upload form also. User can upload a image by click upload button and then click submit to submit post.

Now my upload form can upload image for first reply, but for 2nd reply upload not work.

My submit process: Ajax append a new reply form with its own dynamic id after submission each reply by php.

So after submit 1st reply I cannot upload any image in 2nd or further reply. But image preview work well here. If I click upload page being refresh.

Here is my upload script: (here 888 is my current id which dynamically set by 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>

解决方案

You might need to reset the file form:

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

Also, you can get more debugging information from your AJAX call. Try writing error/success data to the console:

$('.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;
});

这篇关于JQuery的图片上传不适用于未来的事件工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆