【phpwind应用开发教程】ajax文件上传

admin
15560admin社区管理
开发 2016-06-14 16:38:51
15560 开发 2016-06-14 16:38:51

相比那个文件上传,这个高级些,传完图片,图片就已经上传到服务器上了。而且不需要刷新页面,有些情况下会用到这个需求,所以我把方案记录在这里。

如图,我们在模板里面加入一个
type="file" id="icon"的文件上传框



为了实现ajax上传文件,我们用了jquery的一个ajax穿文件的包,
undefined


同时在这个模板里面的代码如下
Wind.js('<!--?php echo htmlspecialchars(Wind::getComponent('response')--->getData('G','url','base'), ENT_QUOTES, 'UTF-8');?>/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 = '&c=app&a=android';
    $.ajaxFileUpload({
        url: url,//用于文件上传的服务器端请求地址
        secureuri: false,//一般设置为false
        fileElementId: 'icon',//文件上传空间的id属性 <input type="file" id="file" name="file"> 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 = '&c=app&a=android';
我们注意到这个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啦。
weixin
小谷派

每一天,发现生活之美!

微信号:sdhy2006