首页 > 代码库 > js实现图片文件上传的心得

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

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

  那么问题来了:PHP处理图片上传时要求JQ实现数据的交互,怎么办?

 

  spacer.gif

  这里涉及到的一个logo上传的需求,根据radio选择是否更新logo,同时form表单将以js事件处理

  spacer.gif

<div class="comLogo sbox">
<div class="CLheader">公司logo:</div>
<div class="ui-imgselect tac">
<!-- 无logo时 -->
<!-- <em>没Logo,无形象</em> -->
<!-- 有logo时 -->
<img src="http://www.mamicode.com/{{$logoURL}}" />
</div>
<p class="ui-img-bf">
<input class="ui-imgbtn" type="button" value="http://www.mamicode.com/上传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="http://www.mamicode.com/否" checked="checked"/>否</span>
<span><input type="radio" name="rdfr" class="btn-radio" value="http://www.mamicode.com/是"/>是</span>
</p>

  这里有一个地方需要特别留意的,就是JS或者Ajax是不能上传文件的,因此我们需要为了解决这个问题,我们将在js方法里面的写一个html的框架,利用iframe框架我们可以把我们需要的数据封装在html里面。然后就可以正常post传递到php后台处理,原因是因为html是可以实现文件上传的,js则不能,所以我们利用iframe框架封装数据,放到html里面让它post到php后台处理,这里就很好的解决了这个问题,由于iframe框架不能显示出来,所以我们必须在样式上做一个隐藏处理。上传文件是,参数enctype="multipart/form-data"是必须的,这个是文件上传使用到的一个参数。之后的表单正常提交就行,后台接受也是正常接受到$_FILE数据,这个就是上次的文件。

  spacer.gif

$("#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

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