索引帖:http://www.phpwind.net/read/2935788
相比那个文件上传,这个高级些,传完图片,图片就已经上传到服务器上了。而且不需要刷新页面,有些情况下会用到这个需求,所以我把方案记录在这里。
如图,我们在模板里面加入一个
type="file" id="icon"的文件上传框
为了实现ajax上传文件,我们用了jquery的一个ajax穿文件的包,
同时在这个模板里面的代码如下
Wind.js('/src/extensions'+'/android/res/js/ajaxfileupload.js');
$('.J_upload_preview').on('change', function(e){
/*
$("#loading")
.ajaxStart(function(){
$(this).show();
})//开始上传文件时显示一个图片
.ajaxComplete(function(){
$(this).hide();
});//文件上传完成将图片隐藏起来
*/
var $this = $(this);
var url = '{@url:app/android/manage/doImageUpload}';
$.ajaxFileUpload({
url: url,//用于文件上传的服务器端请求地址
secureuri: false,//一般设置为false
fileElementId: 'icon',//文件上传空间的id属性
dataType: 'json',//返回值类型 一般设置为json
success: function (data, status)//服务器成功响应处理函数
{
alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
$('#upload_pic').val(data.data);
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.message);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
})
return false;
});我们注意到
$.ajaxFileUpload({
是用来处理ajax上传文件的函数
var url = '{@url:app/android/manage/doImageUpload}';我们注意到这个url,这个url是处理文件上传php端的。我将这个函数贴出来
public function doImageUploadAction(){
$_tmpPath = Wind::getRealDir('EXT:android.data');
if($_FILES['icon']['type'] != 'image/png'){
$dataArr = array(
'state' => 'error',
'message' => '请上传png格式的图片,其他格式一律不行。',
);
echo Pw::jsonEncode($dataArr);exit;
}
//todo很多安全都没做
//move_uploaded_file($_FILES['file']['tmp_name'],$_tmpPath.'/'.$_FILES['file']['name']);
move_uploaded_file($_FILES['icon']['tmp_name'],$_tmpPath.'/ic_launcher.png');
$dataArr = array(
'state' => 'success',
'message' => '图片上传成功',
);
echo Pw::jsonEncode($dataArr);exit;
}在里面,我用了move_uploaded_file函数,把jquery穿上来的临时文件,复制到我自己的存储位置。
然后就OK啦。