1.html代码
<script src="jquery.js"></script>
<script src="ajaxfileupload.js"></script>
<input type="file" class="input w50" value="" name="id_photos" id="id_photos"/>
<input type="hidden" name="p_img" id="p_img">
js 文件需要下载
2.JS代码
$(document).ready(function(){
//照片异步上传
$('#id_photos').change(function(){ //此处用了change事件,当选择好图片打开,关闭窗口时触发此事件
$.ajaxFileUpload({
url:'*******', //处理图片的脚本路径
type: 'post', //提交的方式
secureuri :false, //是否启用安全提交
fileElementId :'id_photos', //file控件ID
dataType : 'json', //服务器返回的数据类型
success : function (data){ //提交成功后自动执行的处理函数
//此处效果是:当成功上传后会返回一个json数据,里面有url,取出url赋给img标签,然后追加到.id_photos类里显示出图片
if(data.code==200){
$('.id_photos').append('<img src="'+data.cover_pic+'" value="'+data.cover_pic+'" style="width:10%" >');
$('#p_img').val(data.cover_pic);
}
//$('.upload-box').remove();
},
error: function(data, status, e){ //提交失败自动执行的处理函数
alert(e);
}
})
})
});
3.php代码
function update(){
$pic = $_FILES['id_photos'];//图片值
$path_name = 'product/';
$ext = strrchr($pic['name'],'.');
$upFilePath = $path_name.date('Y').'/' . date('m') . '/'. date('d');//路径
$name = date("Ymdhis").rand(1000,9999).$ext;
//确保目录可写
$ok= $this->ensure_writable_dir($upFilePath);
$ok = @move_uploaded_file($pic['tmp_name'],$upFilePath.'/'.$name);
if($ok === FALSE){
$code ='400';
}else{
$code = '200';
}
$filename = $upFilePath.'/'.$name ;
echo json_encode(array(
'code' => $code,
'cover_pic' => '/'.$filename,
));
}
//这里我附上ensure_writable_dir()函数的代码
/**
* 确保文件夹存在并可写
*
* @param string $dir
*/
public static function ensure_writable_dir($dir) {
if(!file_exists($dir)) {
mkdir($dir, 0777, true);
chmod($dir, 0777);
chmod($dir, 0777);
} else if(!is_writable($dir)) {
chmod($dir, 0777);
chmod($dir, 0777);
if(!is_writable($dir)) {
throw new FileSystemException("目录 $dir 不可写");
}
}
//return true;
}