js html5 上传文件、多文件，服务器端php

最新推荐文章于 2023-12-15 11:43:44 发布

Talers69

最新推荐文章于 2023-12-15 11:43:44 发布

阅读量2k

点赞数

分类专栏： php javascript 文章标签： html5 php xmlhttprequest 文件上传

本文链接：https://blog.csdn.net/qq_32835907/article/details/72956727

版权

php 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

表单里面的 enctype=”multipart/form-data” 不能少，
使用的是 jq 方式，
XMLHttpRequest 对象是 js 写法，下面注释了，
两种方式，都需要浏览器支持 html5

<!-- html + js 代码  -->
<!DOCTYPE html>
<html>
<hrad>
<script src="http://res.526jia.com/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" action="http://www.code.com/test/test2" method="post" id="form1"> 
    <input type="hidden" name="MAX_FILE_SIZE" value="2000000"> 
    <input type=file name="file[]" size="20" id="file" multiple="multiple"> 
    <input type=submit value="上传文件">
    <em id="test"> hhhhhhhhh </em>
</form>
</body> 
<script>
$('#test').click(function(){
    //var fileobj = document.getElementById("file").files[0];
    var url = 'http://www.code.com/test/test2';
    var file= $('#form1')['0'].files;
    var file= document.getElementById('file').files;
    var form = new FormData();  
    for( i=0; i<file.length; i++ )
    {
        form.append( "file["+i+"]", file[i] ); 
    }
    // var form = new FormData();
    // form.append('authour', 'okay');
    // form.append('upfile', fileobj);
    // XMLHttpRequest 对象
    // var xhr = new XMLHttpRequest();
    // xhr.open("post", url, true);
    // xhr.send(form);
    // xhr.onreadystatechange = function()
    // {
    //  if( xhr.readyState == 4 )
    //  {
    //      if( xhr.status == 200 )
    //      {
    //          console.log( JSON.parse( xhr.responseText ) );
    //      }
    //  }
    // }
    $.ajax( {
        url:url, 
        type:'post',
        data:form,
        async:false,
        cache:false,
        contentType:false,
        processData:false,
        dataType:'json' ,
        success:function(res){
            console.log( res );
    } } );
});
</script>
</html>

下面是服务器端代码，，我的是 php 代码
是将文件存储到服务器的代码
我调用的是 php ci 框架封装好的文件上传类
由于是支持多文件上传，我封装的不是太好

    public function test2()
    {
        if( empty( $_FILES ) ) die( 'not files' );
        // 如果 是 单文件 上传，，转成 多文件 状态上传
        $files = [];
        if( is_array( $_FILES['file']['name'] ) )
        {
            $num = count($_FILES['file']['name'] );
            for( $k=0; $k<$num; $k++ )
            {
                foreach ($_FILES['file'] as $key => $value) 
                {  
                    $files['upfile'.$k][$key] = $value[$k];
                }
            }
            $_FILES = $files;
        }

        $config = [
                'upload_path'   =>  './upload/test',
                'allowed_types' =>  'gif|jpg|jpg|jpeg|rar|zip',
                'file_name'     =>  'haha.jpg'
        ];

        if( ! is_dir( $config['upload_path'] ) )
            mkdir($config['upload_path'], 777, true);

        $this->load->library( 'upload', $config );

        foreach ($_FILES as $key => $value) {
            # code...
            if( ! $this->upload->do_upload($key) )
            {
                //echo json_encode( ['msg'=>$this->upload->display_errors(), 'type'=> 'error' ] );
                var_dump( $this->upload->display_errors() );  
            }else{
                //echo json_encode( ['msg'=> $this->upload->data(), 'type'=>'success'] ) ;
                var_dump( $this->upload->data() ) ;
            }
        }
    }

Talers69

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js html5 上传文件、多文件，服务器端php

表单里面的 enctype=”multipart/form-data” 不能少，使用的是 jq 方式， XMLHttpRequest 对象是 js 写法，下面注释了，两种方式，都需要浏览器支持 html5<!DOCTYPE html><html><hrad><script src="http://res.526jia.com/js
复制链接

扫一扫