图片上传前端实现

<form id="poster_form" class="form-horizontal" method="post" enctype=‘multipart/form-data‘> ???<div class="control-group"> ???????<label class="control-label" >图片上传*</label> ???????<div class="controls"> ???????????<div class="input-group"> ???????????????<input id="img-name-box" name=‘poster_path‘ type="text" class="form-control" value="" readonly> ???????????????<span class="input-group-btn"> ???????????????????<button id="up-btn" class="btn btn-success" type="button">选择文件</button> ???????????????</span> ???????????</div> ???????</div> ???</div></form><form id="imgForm" action="/phptext/php/5-img.php" method="post" enctype="multipart/form-data" target="file_upload_return"> ???<input id="up-file" name="up_img" type="file" style="display: none" value="" /></form><iframe id="file_upload_return" hidden="true" name="file_upload_return"></iframe><div class="img-box"> ???<img src="" id="img-show" class="img-responsive" hidden="hidden" ></div>

$(function () { ???$("#up-btn").on(‘click‘,function(){ ???????$("#up-file").click(); ???}); ???//抓取选择文件事件 ???$(‘#up-file‘).on(‘change‘, function(){ ???????// var name = $(this)[0].files[0].name; ???????var ext = this.value.toLowerCase().split(‘.‘).splice(-1); ???????if ( ext == ‘png‘ || ext == ‘jpg‘) { ???????????console.log(1111); ???????????$(‘#imgForm‘).submit(); ???????} else { ???????????alert(‘只能上传jpg、png格式的图片‘); ???????} ???}); ???//submit返回 ???$("#file_upload_return").load(function(){ ???????var body = $(window.frames[‘file_upload_return‘].document.body); ???????var result = eval(‘(‘ + body[0].textContent + ‘)‘); ???????console.log(result); ???????if (result) { ???????????$(‘#img-name-box‘).val(result.path); ???????????$(‘#img-show‘).attr(‘src‘, ‘http://localhost/phptext/YinLogs/Html/‘ + result.path).show(); ???????} else { ???????????alert(result.info); ???????} ???});});