js实现图片文件上传的心得

  今天研究一下图片上存的一个实现方法，由于上周没写技术周记，这次一定要写好！

  那么问题来了：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 );
$imageClass = new ImageClass ();
$r = $imageClass->upload_image ( $logo, "companyLogo" . $dir, $fileName, false );
if ($r > 0) {
// 移动大图
$absolutePath = URLBean::makeLogoPath ( $companyID, $fileName );
// 大图处理
$imageClass = new ImageClass ();
$absoluteBigThumbPath = URLBean::makeLogoPath ( $companyID, $fileName, ‘big‘ );
$makeThumbResult = $imageClass->make_thumb ( $absolutePath, ‘130‘, ‘65‘, $absoluteBigThumbPath );
if ($makeThumbResult) {
$result = CompanyLogoLogic::updateLogo ( $companyID, $fileName, ‘Y‘ ,‘N‘);
} else {
if ($_POST [‘type‘] != ‘hr‘) {
echo ‘错误信息‘ . $imageClass->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的方法，这个方法考虑的地方在于页面不需要刷新来看结果，有效提高系统性能。

本文出自 “我是一名phper” 博客，请务必保留此出处http://thinkforphp.blog.51cto.com/8733331/1577491