美文网首页
ajax文件上传

ajax文件上传

作者: two_steps | 来源:发表于2017-11-10 11:54 被阅读0次

    上传表单的按钮如果是button,需要把类型定为button,否则form表单就不会通过ajax程序传输数据,因为它的默认类型是submit

    如果保存文件的根目录是新创建的,则需要对这个目录授权(可读可写可操作),否则,上传文件会提示根目录不存在


    ajax代码

    //给表单中上传文件的input标签中添加

    onchange

    事件


        function uploads(){

        var url = "{:U('Fink/upload')}";

        var data = new FormData($('#f_form')[0]);

        $.ajax({

            url:url,

            data:data,

            type:'POST',

            dataType:'json',

            processData: false,

            contentType: false,

            success:function(data){

            //把后台返回数据的文件地址重新赋值给隐藏域,

            //作为下一步提交表单时,文件地址的value值

            $('#cover').val(data.fileUrl);

            alert(data.msg);

            }

        });

    }

    表单:input必须要有name值,否则不会上传文件

    ajax代码:$('#f_form')[0],$('#f_form')是用id选择器选中表单,[0]是一个下标,表示表单中第一个类型为file的input标签

    后台代码:

    function upload(){

    if(IS_POST){

    $file = $_FILES;

    foreach ($file as $k => $v) {

    //生成唯一的ID

    $filename = md5(uniqid(microtime(true),true));

    if($file[$k]['error']==0){

    $config=array(

    'maxSize'=>70000000,

    'exts'=>array('jpg','jpeg','png','gif'),

    'rootPath'=>'./Uploads/',

    //保存的文件名

    'saveName'  =>$filename,

    //开启子目录

    // 'subName'    =>array('date','Ymd'),

    );

    $upload=new \Think\Upload($config);

    $info=$upload->upload();

    if($info){

    //域名

    // $ym='http://yun.zjwhtb.net';

    //根目录

    $rootPath=substr($config['rootPath'],1);

    //文件保存路径

    $savepath=$info[$k]['savepath'];

    //文件名称

    $savename=$info[$k]['savename'];

    $fileUrl = $ym.$rootPath.$savepath.$savename;

    $data['msg']='文件上传成功';

    $data['fileUrl']=$fileUrl;

    // dump($data);die;

    $this->ajaxReturn($data);

    }else{

    $data['msg']=$upload->getError();

    // dump($data);die;

    $this->ajaxReturn($data);

    }

    }else{

    $data['msg']='文件上传错误';

    // dump($data);die;

    $this->ajaxReturn($data);

    }

    }

    }

    }

    相关文章

      网友评论

          本文标题:ajax文件上传

          本文链接:https://www.haomeiwen.com/subject/gpfbmxtx.html