选择后Jquery无法显示图像

时间：2015-08-21 12:43:48

标签： jquery

我想上传图片以点击我的图片按钮。从用户目录中选择后将显示图像。

这是我的正常工作脚本，在这里我添加label for来直接选择图像。但在这之后我无法显示选择图像。

这里的问题是解析预览div中的id。怎么办呢。

在我的脚本中，从目录中选择后我无法显示图像。

这是我的上传脚本:(这里888是我目前通过php动态设置的id）

＆＃13;
＆＃13; 
$(document).on('change', '#repfile', function(){
  var ID = $(this).attr('class');
  var VOID = $(this).attr('alt')
  $("#show_img_upload_rep"+ID).show();
  $('.upfrmrep'+ID).show();
  previewPic(this);
});

//preview image

function previewPic(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();
        reader.onload = function (e) {
        $("#preview_rep"+ input.getAttribute('class')).attr('src', e.target.result);
        $("#output_rep"+ input.getAttribute('class')).show();
        };
    reader.readAsDataURL(input.files[0]);
    }
}
＆＃13; 
.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;
    }
＆＃13; 
<div class="replyform">
            <form action="" method="post" class="repfrm888" id="prepfrm">
                <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">
                    <label for="repfile">
                    <img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png"/>
                      </label>
                      </div>
            </form>
                 <div align="left" id="show_img_upload_rep888" class="show_img_upload_rep" style="align:left; text-align:left; float:left; margin-top:0px; display:none">
                   
                 <div class="upfrmrep888">
					<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">
        			<input type="file" name="file" id="repfile" class="888" alt="111" 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>
    </div>
 <br><br><br>
<div class="replyform">
            <form action="" method="post" class="repfrm999" id="prepfrm">
                <input type="hidden" name="username" id="author" value="'.$_SESSION['username'].'"/>
                <div class="maintbox">
                    <div class="chat">
                    <textarea name="replycom" id="replycom999" class="replycom" placeholder="Type your comment ..."></textarea>
                    </div>
                    <div id="right">
                    <label for="repfile">
                    <img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png"/>
                      </label>
                      </div>
            </form>
                 <div align="left" id="show_img_upload_rep999" class="show_img_upload_rep" style="align:left; text-align:left; float:left; margin-top:0px; display:none">
                   
                 <div class="upfrmrep999">
					<div id="output_rep999" style="display:none;">
        			<img id="preview_rep999" src="" alt="No Image Found"/>
    				</div>
    				<form class="upload_Reply" id="999'" method="post" enctype="multipart/form-data">
        			<input type="file" name="file" id="repfile" class="999" alt="111" value="" style="margin:5px 10px;float:left;font-size:12px;font-weight:bold;"/> 
        			<input type="submit" class="upload_repimg" id="999" name="upload_btn" value="Upload Picture"/>
    				</form>
				</div>
                 </div>
                 </div>
            <button type="submit" name="submitrep" value="" id="repl999" class="replyfrm">Post Reply</button>
    </div>
     
    <script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您应该使用getAttribute()来获取元素属性，而不是input.class。

$(document).on('change', '#repfile', function() {
  var ID = $(this).attr('class');
  var VOID = $(this).attr('alt')
  $("#show_img_upload_rep" + ID).show();
  $('.upfrmrep' + ID).show();
  previewPic(this);
});

//preview image

function previewPic(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $("#preview_rep" + input.getAttribute('class')).attr('src', e.target.result);
      $("#output_rep" + input.getAttribute('class')).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">
  <form action="" method="post" class="repfrm888" id="prepfrm">
    <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">
        <label for="repfile">
          <img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png" />
        </label>
      </div>
  </form>
  <div align="left" id="show_img_upload_rep888" class="show_img_upload_rep" style="align:left; text-align:left; float:left; margin-top:0px; display:none">

    <div class="upfrmrep888">
      <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">
        <input type="file" name="file" id="repfile" class="888" alt="999" 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>
</div>

<script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>

相关问题
最新问题