首先是HTML格式:
<li> ???????????????????????????????????<span>上传:</span> ???????????????????????????????????<div class="loginInput"> ???????????????????????????????????????<div class="fileInput"> ???????????????????????????????????????????<div class="fileBox"> ???????????????????????????????????????????????{if $info[‘certificate‘]} ???????????????????????????????????????????????<img src="{$info[‘certificate‘]}" width="278"> ???????????????????????????????????????????????{else} ???????????????????????????????????????????????<i class="filePic"></i> ???????????????????????????????????????????????<p>法人证书或营业执照复印件</p> ???????????????????????????????????????????????{/if} ???????????????????????????????????????????</div> ???????????????????????????????????????????<input class="files" id="fileupload" name="file" type="file" value="{$info[‘certificate‘]}"/> ???????????????????????????????????????????<input type="hidden" name="certificate" id="pic_val" > ???????????????????????????????????????</div> ???????????????????????????????????</div> ???????????????????????????????</li>
input 的 name建议设置成file 要不有时候接收不到传递到后台的参数。
然后是js:
<script src="https://www.helloweba.com/demo/ajaxsubmit/jquery.form.min.js" type="text/javascript"></script><script type="text/javascript"> ???$(function () { ???????var bar = $(‘.bar‘); ???????var percent = $(‘.percent‘); ???????var showimg = $(‘#showimg‘); ???????var progress = $(".progress"); ???????var files = $(".files"); ???????var btn = $(".btn span"); ???????$("#fileupload").wrap("<form id=‘myupload‘ action=‘{HOST_NAME}user/User/import3‘ method=‘post‘ enctype=‘multipart/form-data‘></form>"); ???????$("#fileupload").change(function(){ ???????????$("#myupload").ajaxSubmit({ ???????????????dataType: ?‘json‘, ???????????????beforeSend: function() {// ???????????????????showimg.empty();// ???????????????????progress.show();// ???????????????????var percentVal = ‘0%‘;// ???????????????????bar.width(percentVal);// ???????????????????percent.html(percentVal);// ???????????????????btn.html("上传中..."); ???????????????}, ???????????????uploadProgress: function(event, position, total, percentComplete) { ???????????????????var percentVal = percentComplete + ‘%‘; ???????????????????bar.width(percentVal); ???????????????????percent.html(percentVal); ???????????????}, ???????????????success: function(data) { ???????????????????if(data.status == 0) { ???????????????????????$(‘.fileBox i‘).hide(); //删除 ???????????????????????$(‘.fileBox p‘).hide(); // 删除 ???????????????????????$(‘.fileBox img‘).attr(‘src‘, data.name); // 显示 ???????????????????????$(‘.fileBox img‘).show(); //显示 ???????????????????????$("#pic_val").attr(‘value‘, data.name); //传递图片值// ???????????????????????$("#show_pic_show").attr(‘src‘, data.name); // 传递到初始阶段 ???????????????????}else{ ???????????????????????layer.msg(data.name, { ???????????????????????????offset: ‘t‘, ???????????????????????????anim: 6 ???????????????????????}); ???????????????????????return false; ???????????????????} ???????????????????return false; ???????????????}, ???????????????error:function(xhr){ ???????????????????btn.html("上传失败"); ???????????????????bar.width(‘0‘) ???????????????????files.html(xhr.responseText); ???????????????} ???????????}); ???????}); ???});</script><!--ajax图片上传结束-->
后台代码PHP:
// 上传文件 ???public function import3Action() ???{ ???????//上传头像 ???????if(isPost()){ ???????????$file = $_FILES[‘file‘][‘tmp_name‘]; ???????????if(!empty($file)){ ???????????????Load::load_class(‘fileupload‘,DIR_BF_ROOT.‘classes‘,0); ???????????????$up = new fileupload; ???????????????$up -> set("path", DIR_ROOT . ‘static/uploadfile/zhizhao‘); ???????????????// ???????????$up -> set("path",DIR_BF_ROOT . ‘excel/‘); ???????????????$up -> set("maxsize", 200000); ???????????????$up -> set("allowtype", array("gif", "png", "jpg","jpeg")); ???????????????// ???????????$up -> set("allowtype", array("xls")); ???????????????if($up -> upload("file")) { ???????????????????// 获取上传后的文件名称 ???????????????????$filename = ?‘/static/uploadfile/zhizhao/‘.$up->getFileName(); ???????????????????echo json_encode(array(‘status‘ => 0, ‘name‘ => $filename));exit(); ???????????????} else { ???????????????????echo json_encode(array(‘statsu‘ => 1, ‘name‘ => $up->getErrorMsg()));exit(); ???????????????} ???????????} ???????} ???????//上传头像结束 ???????include $this->display(‘fileTest.html‘); ???}
jqueryForm 异步上传图片文件
原文地址:http://www.cnblogs.com/photo520/p/7576092.html