今天研究一下图片上存的一个实现方法,由于上周没写技术周记,这次一定要写好!
那么问题来了:PHP处理图片上传时要求JQ实现数据的交互,怎么办?
这里涉及到的一个logo上传的需求,根据radio选择是否更新logo,同时form表单将以js事件处理
<div class="comLogo sbox">
<div class="CLheader">公司logo:</div>
<div class="ui-imgselect tac">
<!-- 无logo时 -->
<!-- <em>没Logo,无形象</em> -->
<!-- 有logo时 -->
<img src="{{$logoURL}}" />
</div>
<p class="ui-img-bf">
<input class="ui-imgbtn" type="button" value="上传Logo">
<input id="ui-imgfile" class="ui-imgfile" type="file" name="fileImg">
</p>
</div>
<p class="btnRd box">
<strong>是否更新logo:</strong>
<span><input type="radio" name="rdfr" class="btn-radio" value="否" checked="checked"/>否</span>
<span><input type="radio" name="rdfr" class="btn-radio" value="是"/>是</span>
</p>
这里有一个地方需要特别留意的,就是JS或者Ajax是不能上传文件的,因此我们需要为了解决这个问题,我们将在js方法里面的写一个html的框架,利用iframe框架我们可以把我们需要的数据封装在html里面。然后就可以正常post传递到php后台处理,原因是因为html是可以实现文件上传的,js则不能,所以我们利用iframe框架封装数据,放到html里面让它post到php后台处理,这里就很好的解决了这个问题,由于iframe框架不能显示出来,所以我们必须在样式上做一个隐藏处理。上传文件是,参数enctype="multipart/form-data"是必须的,这个是文件上传使用到的一个参数。之后的表单正常提交就行,后台接受也是正常接受到$_FILE数据,这个就是上次的文件。
$("#submitForm").live("submit",function(e){ var $infoForm = $(this); var $submit = $(".j-submit-infoprint"); var radio = $('input[name="rdfr"]:checked').val(); if(radio != '是'){ e.preventDefault(); $submit.tipsBox("loading", "正在努力提交中..."); if (this.ajaxRequest_ != undefined && this.ajaxRequest_.readyState < 4) { $submit.tipsBox("failure", "请勿重复提交"); return false; } this.ajaxRequest_ = jQuery.ajax( { type : 'post', url : '/process/', data : $infoForm.serialize(), dataType : 'json', success : function(data) { infoLogoSuccess(result); } }); return false; }else{ $infoForm.attr({ 'method':'post', 'target':'infoForm-iframe', 'action':'/process/', 'enctype':'multipart/form-data' }); if ($('.ui-up-iframe').length == 0) { var iframeHtml = '<iframe style="display: none;" name="infoForm-iframe" id="infoForm-iframe" class="ui-up-iframe"></iframe>'; $infoForm.after(iframeHtml); } } }); })();
这个js方法,首先获取一些值,判定radio的值来进行相应操作 , 表单数据以Ajax提交指定路径,根据返回结果显示操作结果。
function infoLogoSuccess(result){ var $submit = $(".j-submit-infoprint"); if(result>0){ if(data['param']['type'] != ['hr']){ window.location.href = data['param']['companyURL']; } $submit.tipsBox("success", "你已经提交成功"); }else if(result == '-10'){ $submit.tipsBox("tips", "你没有修改企业资料:)"); function removeTipsBox () { $submit.removeTipsBox(); } setTimeout(removeTipsBox,1500); }else{ $submit.tipsBox("failure", "网络超时"); } }
根据返回结果显示操作结果,要写到radio判定处理的外面,原因是这个方法是独立的,radio的值不会影响到它。
js对文件处理的过程就是这样,对radio的选定判断,对应做不同的操作处理,然后在js写一个html封装处理,解决js和Ajax不能上传文件的问题,之后对php处理返回的值进行判断处理。
php怎么处理提交过来的数据,进行处理,特别是上传文件(现在是图片上传)的处理:
// 更新公司信息
$result = CompanyEditLogFunction::updateCompanyInfo ( $companyID, $nowName, $nowSort, $nowWorker, $nowCity, $nowAddress, $nowURL, $nowContent, '', '', $nowCompanyType, $nowSmallIndustry, $nowShortName );
// 更新公司图片
if ($_POST ['rdfr'] == '是') {
// 公司logo
$logo = $_FILES ['fileImg'];
if (is_uploaded_file ( $logo ['tmp_name'] )) {
// 文件上传
$time = microtime ( true ) * 10000;
//获取图片的后缀
$len = strrpos($logo ['name'], '.');
$suffix = substr($logo ['name'], $len+1);
$fileName = "{$time}.{$suffix}";
$dir = ImageClass::seperateUserPath ( $companyID );
$p_w_picpathClass = new ImageClass ();
$r = $p_w_picpathClass->upload_p_w_picpath ( $logo, "companyLogo" . $dir, $fileName, false );
if ($r > 0) {
// 移动大图
$absolutePath = URLBean::makeLogoPath ( $companyID, $fileName );
// 大图处理
$p_w_picpathClass = new ImageClass ();
$absoluteBigThumbPath = URLBean::makeLogoPath ( $companyID, $fileName, 'big' );
$makeThumbResult = $p_w_picpathClass->make_thumb ( $absolutePath, '130', '65', $absoluteBigThumbPath );
if ($makeThumbResult) {
$result = CompanyLogoLogic::updateLogo ( $companyID, $fileName, 'Y' ,'N');
} else {
if ($_POST ['type'] != 'hr') {
echo '错误信息' . $p_w_picpathClass->error_msg ();
}
}
}
}
}
这里的处理是执行文本数据的入库操作,完了之后在执行图片处理的操作,首先把$_FILES里面的图片拿出来,然后获取一些需要用到的参数或者说是一些用到的数据,调用图片类进行处理,组装出图片的路径和图片名,然后调用相应的更新图片方法,进行处理。之后再对更新成功的图片进行压缩处理,创建图片URL等一些操作,最终为图片上传操作打好基础。
if ($_POST ['rdfr'] == '是'){
echo "<script>parent.infoLogoSuccess({$result})</script>";
}else{
echo PageUtil::setJsonReturn ( $result,$param );
}
这个是操作成功后,调用父页面显示结果,因为之前提交数据是在子页面iframe那里提交的正常来说返回结果应该就在子页面显示结果,但是我们在那里做了一个样式的隐藏处理,这样使得就算你返回结果却还是看不到的,所以我们需要把结果返回到父页面那里,这段代码就是我们想要的:
echo "<script>parent.infoLogoSuccess({$result})</script>"
综上所述,这个就是一个图片采用js处理上传的解决路径之一,当然你也可以直接用html上传,这个只管简洁,html也有对应的系统变量给你
传递数据,所以之所以采用js的方法,这个方法考虑的地方在于页面不需要刷新来看结果,有效提高系统性能。
转载于:https://blog.51cto.com/thinkforphp/1577491