问题描述:在ecmall个人用户登录,点击用户中心-店铺设置-更换店标,上传一个jpg图像(图像符合规范)后,不能预览,而且在页面底部点击提交后没有上传成功。banner店铺条幅也是一样的情况,还有下面的店铺简介中也无法上传图片。不光如此,上传了竟然还不能预览。
版本ecmall2.3.0
1.web上传文件原理
查看源码,发现ecmall上传文件是用JQuery+PHP的方式实现上传的,于是去搜这种方式的原理,解释如下。
首先明确,上传步骤是web浏览器先把文件传到服务器端,放在临时文件夹中的一个改了名字的临时文件,然后使用上传处理函数来把这个文件拷贝到其他地方。完成之后临时文件会被删除,所以如果不拷贝出来,就没了。这与使用PHP、JSP还是ASP哪种语言无关。把<input type="file" />放在form中,当form提交的时候,就传上去了。
以下是示例代码:
test.html
<form action="do_file_upload.php"method="post"enctype="multipart/form-data">
<p>
上传图片:
<input type="file" name="picture" />
<input type="submit" value="Send" />
</p>
</form>
注意:enctype="multipart/form-data",必需这样设定,表示动作为文件上传。请求成功后,文件被上传到了服务器的临时文件夹中。至于到达目的地后,如果不转移出去,则在表单请求结束时会删除文件。所以我们要写一个处理上传文件的脚本,这里我们用PHP来处理
do_file_upload.php
<?php
$error="";//上传文件出错信息
$msg="";
$fileElementName='picture';
$allowType=array(".jpg",".gif",".png");//允许上传的文件类型
$num = strrpos($_FILES['picture']['name'],'.');
$fileSuffixName =substr($_FILES['picture']['name'],$num,8);//此数可变
$fileSuffixName =strtolower($fileSuffixName);//确定上传文件的类型
$upFilePath ='d:/';//最终存放路径
if(!empty($_FILES[$fileElementName]['error']))
{
switch($_FILES[$fileElementName]['error'])
{
case'1':
$error='传的文件超过了php.ini 中 upload_max_filesize选项限制的值';
break;
case'2':
$error='上传文件的大小超过了HTML 表单中 MAX_FILE_SIZE选项指定的值';
break;
case'3':
$error='文件只有部分被上传';
break;
case'4':
$error='没有文件被上传';
break;
case'6':
$error='找不到临时文件夹';
break;
case'7':
$error='文件写入失败';
break;
default:
$error='未知错误';
}
}elseif(empty($_FILES['fileToUpload']['tmp_name'])||$_FILES['fileToUpload']['tmp_name']=='none')
{
$error='没有上传文件.';
}elseif(!in_array($fileSuffixName,$allowType))
{
$error='不允许上传的文件类型';
}else{
$ok=@move_uploaded_file($_FILES['fileToUpload']['tmp_name'],$upFilePath); // move_uploaded_file函数把临时文件转移到目标路径下。
if($ok===FALSE){
$error='上传失败';
}
}
?>
另注:关于$_FILES数组
此数组包含有所有上传的文件信息,即记录下了上传文件时的相关信息。
以上范例中 $_FILES 数组的内容如下所示。我们假设文件上传字段的名称如上例所示,为 userfile。名称可随意命名。
$_FILES['userfile']['name']
客户端机器文件的原名称。
$_FILES['userfile']['type']
文件的 MIME 类型,如果浏览器提供此信息的话。一个例子是“image/gif”。不过此 MIME 类型在 PHP 端并不检查,因此不要想当然认为有这个值。
$_FILES['userfile']['size']
已上传文件的大小,单位为字节。
$_FILES['userfile']['tmp_name']
文件被上传后在服务端储存的临时文件名。
$_FILES['userfile']['error']
和该文件上传相关的错误代码。此项目是在 PHP 4.2.0 版本中增加的。
关于错误码
$_FILES['img']['error']有以下几种类型
UPLOAD_ERR_OK
其值为 0,没有错误发生,文件上传成功。
UPLOAD_ERR_INI_SIZE
其值为 1,上传的文件超过了 php.ini 中 upload_max_filesize选项限制的值。
UPLOAD_ERR_FORM_SIZE
其值为 2,上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值。
UPLOAD_ERR_PARTIAL
其值为 3,文件只有部分被上传。
UPLOAD_ERR_NO_FILE
其值为 4,没有文件被上传。
UPLOAD_ERR_NO_TMP_DIR
其值为 6,找不到临时文件夹。PHP 4.3.10 和 PHP 5.0.3 引进。
UPLOAD_ERR_CANT_WRITE
其值为 7,文件写入失败。PHP 5.1.0 引进。
move_uploaded_file()
文件被上传后,默认地会被储存到服务端的默认临时目录中(除非 php.ini 中的 upload_tmp_dir设置为其它的路 径),文件名是随机的。如果该文件没有被移动到其它地方也没有被改名,则该文件将在表单请求结束时被删除。因此需要通过 move_uploaded_file移动临时文件。
经实验copy也能完成move_uploaded_file的功能,为啥要用move_uploaded_file呢?有说法是move_uploaded_file会对上传文件做一些检查,防止copy引起的一些安全漏洞。但具体copy会带来什么问题呢?我并没有查到。
安全检查
可以考虑通过$_FILES['img']['size']和$_FILES['img']['type']对上传的文件做一些安全检查,比如限定上传类型,上传文件的大小等。
2.解决问题
好了,经过对以上原理的了解,现在我们可以通过使用FireFox调试工具的方式,来跟踪图片上传的代码处理了。
F12打开FireFox调试窗口,在includeslibrariesjavascriptecmall.js中找到了function getFullPath(obj),在其内部打断点,一步一步运行。这个函数内没有异常,也正常获取到了上传图片的路径,是一窜看不懂的字符串。从这个函数跳出来后,就跳转到了themesmalldefaultmy_store.index.html中的
$(function(){
$('input[ectype="change_store_logo"]').change(function(){//当点击上传logo图片按钮,上传了图片后,此动作被触发。
var src= getFullPath($(this)[0]);
$('img[ectype="store_logo"]').attr('src', src);
$('input[ectype="change_store_logo"]').removeAttr('name');
$(this).attr('name','store_logo');
});
看$('input[ectype="change_store_logo"]').change(function()这一行,这是JQuery语法,意思是图片选择控件发生内容变化的时候,就触发这个函数。它内部实现其实就是预览图片的功能,通过$('img[ectype="store_logo"]').attr('src', src);这一句代码实现。
从这个函数跳出后发现页面自己提交刷新了,貌似什么都没跟踪到,图片还是没上传。
通过前一节的分析,我们知道提交图片必须有个form,那么这个form是一定要被处理的,于是在form定义处发现
<formmethod="post" enctype="multipart/form-data"id="my_store_form">
没有指明处理form的PHP文件名称,说明这里使用JQuery处理的,于是在文件内搜索’# my_store_form’,终于找到了
$('#my_store_form').validate({
这行是当表单提交的时候,对数据做验证。断点进去,最后还是验证成功的,调用了其内部的
success :function(label){
函数来输出校验成功标签。
到这里,说明客户端上传文件起码是成功的,问题会不会在服务器端没有保存文件,或者没有转移上传生成的临时文件呢?
再看那个JQuery的#my_store_form只是做了校验,但是我们前面说的,php服务器端对文件的转移工作呢?在哪里做的,线索到这里似乎断掉了,我不知道哪个php文件区处理了form。
于是又从头查起,根据MVC模式处理特点,先找到处理店铺设置的页面,是appmy_store.app.php。为了加快速度,直接去搜”上传文件“或者”上传图片“的字眼,发现了如下函数
/**
* 上传文件
*
*/
function _upload_files()
{
import('uploader.lib');
$data =array();
/* store_logo */
$file=$_FILES['store_logo'];
if($file['error']==UPLOAD_ERR_OK&&$file!='')
{
$uploader=new Uploader();
$uploader->allowed_type(IMAGE_FILE_TYPE);
$uploader->allowed_size(SIZE_STORE_LOGO);//20KB
$uploader->addFile($file);
if($uploader->file_info()===false)
{
$this->show_warning($uploader->get_error());
returnfalse;
}
$uploader->root_dir(ROOT_PATH);
$data['store_logo']=$uploader->save('data/files/store_'.$this->_store_id.'/other','store_logo');
}
/* store_banner */
$file=$_FILES['store_banner'];
if($file['error']==UPLOAD_ERR_OK&&$file!='')
{
$uploader=new Uploader();
$uploader->allowed_type(IMAGE_FILE_TYPE);
$uploader->allowed_size(SIZE_STORE_BANNER);//200KB
$uploader->addFile($file);
if($uploader->file_info()===false)
{
$this->show_warning($uploader->get_error());
returnfalse;
}
$uploader->root_dir(ROOT_PATH);
$data['store_banner']=$uploader->save('data/files/store_'.$this->_store_id.'/other','store_banner');
}
return$data;
}
先在函数内加一行,用echo函数输出点字符信息,结果发现提交表单后,页面上头有字符打印。果然调用了这个函数,好幸运。
经过在几个异常分支加打印信息,发现
$uploader->addFile($file);
这行其实返回的是false,但是程序中没有对返回值判断,导致其溜掉了。进入其实现函数,是在includeslibrariesuploader.lib.php:23行,
/**
* 添加由POST上来的文件
*
* @author Garbin
* @param none
* @return void
*/
function addFile($file)
{
if (!is_uploaded_file($file['tmp_name']))
{
return false;
}
$this->_file = $this->_get_uploaded_info($file);
}
再加异常分支打印信息,发现is_uploaded_file函数返回false,看来对$file['tmp_name']的检测是失败的,会不会这个文件不存在?
于是回到my_store.app.php的_upload_files函数中,用var_dump($file);把$file的信息全部打印出来
array (size=5)
'name' =>string 'logo1.jpg' (length=9)
'type' =>string 'image/jpeg' (length=10)
'tmp_name' =>string 'D:\xampp\tmp\phpA921.tmp' (length=27)
'error' =>int 0
'size' => string '2512' (length=4)
临时文件的地址是一个实际机器上的地址,到这个地址下每一找到tmp文件,重试了多次,tmp文件的名称发生变化,但是均没生成文件。
到此,立刻觉得应该是这个目录没有写权限,于是给这个目录赋予了各种权限,连Everyone用户都是完全控制的权限赋予它,但是没用。网上搜这类问题,有说php.ini的临时文件配置不对,打开php.ini,看到upload_tmp_dir="D:xampp mp",配置也没错。
后来还是在网上搜到,有人说是路径不能用两个反斜杠,应该替换成一个,于是试了下,把addFile中做如下替换
function addFile($file)
{
if (!is_uploaded_file(str_replace('\\','\',$file['tmp_name'])))//把$file['tmp_name']中的\换成,这样本地路径才能访问。
{
return false;
}
$this->_file = $this->_get_uploaded_info($file);
}
竟然通过检查了,原来罪魁祸首在这里。我的php是5.4的,在这之前的版本是支持magic_quotes_gpc配置的,在php.ini中找到这一项,把它置为On,则PHP环境会自动对GET/POST/Cookie添加addslashes效果,会把返回路径两个斜杠过滤掉了,可惜5.4不支持了,现在我只能手动去替换字符了,不过也可以解决问题。
还没完,在uploader.lib.php中的save函数是用来拷贝临时文件到系统目录的,把这里return的地方也进行替换,如下
return $this->move_uploaded_file(str_replace('\\','\',$this->_file['tmp_name']),$path);
问题解决,再在任何地方上传图片都OK了。
http://blog.csdn.net/socho/article/details/35566559