服务器基于PHP CodeIgniter,Android基于Volley实现多文件/图片上传(含服务器,web版和android客户端完整代码)

原创 2015年11月20日 15:03:02

问题背景:app在上传图片时,同时传递参数,支持传递多个图片。本文中的环境默认已经配好了服务器的CodeIgniter框架。事实上不使用这个框架也是可以的。

一,服务器部分

1,在controllers下的helpers新建文件upload_helper.php


<?php
/**
 * Make multifile array input complaint with CI_Upload.<br>
 * For use files[ ] input name you must use it method.
 *
 * @author porquero
 *
 * @example
 * In Controller<br>
 * $this->load->helper('upload');<br>
 * multifile_array();<br>
 * foreach ($_FILES as $file => $file_data) {<br>
 *    $this->upload->do_upload($file);
 * ...
 *
 * @link http://porquero.blogspot.com/2012/05/codeigniter-multifilearray-upload.html
 */
function multifile_array()
{
    if(count($_FILES) == 0)
        return;

    $files = array();
    $all_files = $_FILES['f_file']['name'];
    $i = 0;

    foreach ((array)$all_files as $filename) {
        $files[++$i]['name'] = $filename;
        $files[$i]['type'] = current($_FILES['f_file']['type']);
        next($_FILES['f_file']['type']);
        $files[$i]['tmp_name'] = current($_FILES['f_file']['tmp_name']);
        next($_FILES['f_file']['tmp_name']);
        $files[$i]['error'] = current($_FILES['f_file']['error']);
        next($_FILES['f_file']['error']);
        $files[$i]['size'] = current($_FILES['f_file']['size']);
        next($_FILES['f_file']['size']);
    }
    $_FILES = $files;
}

说明:

a.注意里面的key为'f_file',这就要求app或web在上传,建表单的时候将此值对应上。

b.该文件主要是遍历$_FILES,通过current得到当前file的信息转存到数组里,然后返回。注意转存后索引是从1开始的。转存的字段有name/type/tmp_name/error/size,使用next移动$_FILES['f_file']['key']的指针。

2.views里新建upload_form.php,用来在web上模拟测试上传是否成功:

<html>
<head>
    <title>Upload Form</title>
</head>
<body>

<?php echo $error;?>
<?php $data = array('type'=>'shop', 'id'=>'1');?>

<?php echo form_open_multipart('upload/web_upload', '', $data);?>

<input type="file" name="f_file[]" multiple="multiple" size="20" />

<br /><br />

<input type="submit" value="upload" />

</form>

</body>
</html>
注意:

a,这里使用了CI框架的form_open_multipart新建一个multipart的表单,访问的是控制器upload里的web_upload方法,第三个参数$data,用于模拟向服务器传递的post请求参数。当然你也可以在下面加几个<input>.

b,input里name对应的是f_file[],这个是跟 服务器那边统一好的。

c,若要支持多文件上传加上multiple="multiple",不加的话一次只能上传一个文件。


3,views下新建upload_success.php,显示上传成功后的界面。

<html>
<head>
    <title>Upload Form</title>
</head>
<body>

<h3>Your file was successfully uploaded!</h3>

<ul>
    <?php foreach ($upload_data as $item => $value):?>
        <li><?php echo $item;?>: <?php echo $value;?></li>
    <?php endforeach; ?>
</ul>

<p><?php echo anchor('upload', 'Upload Another File!'); ?></p>

</body>
</html>

注意:这里的$upload_data是控制器上传成功后传给view的数据。


4,接下来是最关键的一个类,在controllers文件夹下新建Upload.php,这是个控制器,上传最核心的。

<?php

require_once APPPATH . 'controllers/base/BASE_CI_Controller.php';
class Upload extends BASE_CI_Controller{
    private $m_type = '';
    private $m_id = '';
    private $m_path = './application/cache/image';
    private $m_error = array();
    public function __construct()
    {
        parent::__construct();
        $this->load->helper(array('form', 'url', 'upload'));
        //$this->load->model('picture_model');
    }

    public function index()
    {
        $this->load->view('upload_form', array('error' => ' ' ));
    }

    public function app_upload(){
        $this->init_argc();
        multifile_array();
        foreach ($_FILES as $file => $file_data){
            $this->do_upload($file);
        }
        if($this->m_error == NULL || count($this->m_error) == 0){
            $this->output->set_output(json_encode(array('msg'=>'上传成功')));
        }else{
            $this->output->set_output(json_encode($this->m_error));
        }
    }


    public function do_upload($file)
    {
        $config['upload_path']      =  $this->m_path;
        $config['allowed_types']    = 'gif|jpg|png|jpeg';
        $config['max_size']     = 10240;
        $config['max_width']        = 2000;
        $config['max_height']       = 2000;
        $config['file_name'] = Util::random_str();

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

        if ( ! $this->upload->do_upload($file)){
            $this->on_upload_error($this->upload->display_errors());
        }
        else{
            $upload_data = $this->upload->data();
            $this->on_upload_success($upload_data['file_name']);
        }
    }

    public function do_upload2($file)
    {
        $config['upload_path']      =  $this->m_path;
        $config['allowed_types']    = 'gif|jpg|png|jpeg';
        $config['max_size']     = 10240;
        $config['max_width']        = 2000;
        $config['max_height']       = 2000;
        $config['file_name'] = Util::random_str();

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

        if ( ! $this->upload->do_upload($file))
        {
            $error = array('error' => $this->upload->display_errors());
            $this->load->view('upload_form', $error);
        }
        else
        {
            $data = array('upload_data' => $this->upload->data());

            $this->load->view('upload_success', $data);
        }
    }

    public function web_upload()
    {
        multifile_array();
        foreach ($_FILES as $file => $file_data){
            $this->do_upload2($file);
        }
    }

    private function init_argc() {
        $this->m_type = $this->getPost('type');
        $this->m_id = $this->getPost('id');
        $this->m_path = $this->getPath($this->m_type);
    }

    private function getPath($type){
        $path = './application/cache/image/shop';
        if($type == "shop"){
            $path =  './application/cache/image/shop';
        }
        return $path;

    }

    private function on_upload_success($name){
        if($this->m_type == 'shop'){
            //$this->picture_model->add_shop_picture($this->m_id, $this->m_type, $name);
        }else if($this->m_type == 'avatar'){
            //$this->picture_model->add_user_avatar($this->m_id, $this->m_type, $name);
        }
    }
    private function on_upload_error($error){
        $this->m_error['msg'] = $error;
    }

}
?>
解释如下:

a,这里Upload是继承的BASE_CI_Controller,也可以换成CI_Controller,在自己的Base_CI_Controller里封装了自己项目一些常用的安全校验逻辑;

b,我定义了m_type记录上传图片的类型,m_id是图片所属对象的id,m_path为路径,根据type不同路径可以做区分。m_error纪录错误。在构造函数里,注意把几个helper都load进来。除此外我还写了个Picture_model用来操作图片相关的数据库,如果不需要这个model,可以注释掉。

c,app_load()是暴露给app用来上传的,init_argc()初始化post传来的各种参数。然后就是调multifile_array();之后遍历上传。待上传完毕后根据m_error里是否为空,判断是该显示什么消息给app。在do_upload()里的Util::random_str()是个很简单的对时间戳md5,防止图片名字一样:

Util里的代码:

    /**
     * 产生新的token
     * @return string
     */
    public static function token(){
        $curr = Util::time();
        return md5($curr);
    }

    public static function random_str(){
        return Util::token();
    }

每次上传成功后都调on_upload_success() on_upload_error()进行更新数据库等操作。其中on_upload_success()要接收$upload_data['file_name']),表示上传成功后的文件的名字。

d,web_upload是给web上传图片用的,通过do_upload2()上传成功后就加载一个view来显示上传后的信息。PS:保证你对目的文件夹有可写权限。

先用web测试下效果:http://localhost/~yanzi/city52/index.php/upload


二,客户端:基于Volley的多文件/图片上传类的封装

这个比较简单,基于volley封装的,MultipartRequest.java

package com.android.nomnom.volley;

import android.util.Log;

import com.android.volley.AuthFailureError;
import com.android.volley.NetworkResponse;
import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyLog;
import com.android.volley.toolbox.HttpHeaderParser;

import org.apache.http.entity.mime.MultipartEntity;
import org.apache.http.entity.mime.content.FileBody;
import org.apache.http.entity.mime.content.StringBody;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.nio.charset.Charset;
import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 功能:
 *
 * @author yanzi E-mail: yanzi1225627@163.com
 * @version 创建时间: 2015-08-09 下午4:32
 */
public class MultipartRequest extends Request<String>{

    private MultipartEntity entity = new MultipartEntity();

    private  Response.Listener<String> mListener;

    private List<File> mFileParts;
    private String mFilePartName;
    private Map<String, String> mParams;

    /**
     * 单个文件+参数 上传
     * @param url
     * @param listener
     * @param errorListener
     * @param filePartName
     * @param file
     * @param params
     */
    public MultipartRequest(String url, Response.Listener<String> listener, Response.ErrorListener errorListener,
                            String filePartName, File file, Map<String, String> params){
        super(Method.POST, url, errorListener);
        mFileParts = new ArrayList<File>();
        if(file != null && file.exists()){
            mFileParts.add(file);
        }else{
            VolleyLog.e("MultipartRequest---file not found");
        }
        mFilePartName = filePartName;
        mListener = listener;
        mParams = params;
        buildMultipartEntity();

    }

    /**
     * 多个文件+参数上传
     * @param url
     * @param listener
     * @param errorListener
     * @param filePartName
     * @param files
     * @param params
     */
    public MultipartRequest(String url,Response.Listener<String> listener,Response.ErrorListener errorListener
                            , String filePartName,List<File> files, Map<String, String> params) {
        super(Method.POST, url, errorListener);
        mFilePartName = filePartName;
        mListener = listener;
        mFileParts = files;
        mParams = params;
        buildMultipartEntity();
    }

    @Override
    protected Response<String> parseNetworkResponse(NetworkResponse response) {
        String parsed;
        try {
            parsed = new String(response.data,
                    HttpHeaderParser.parseCharset(response.headers));
        } catch (UnsupportedEncodingException e) {
            parsed = new String(response.data);
        }
        return Response.success(parsed,
                HttpHeaderParser.parseCacheHeaders(response));
    }

    @Override
    protected void deliverResponse(String response) {
        mListener.onResponse(response);
    }

    @Override
    public Map<String, String> getHeaders() throws AuthFailureError {
        Map<String, String> headers = super.getHeaders();

        if (headers == null || headers.equals(Collections.emptyMap())) {
            headers = new HashMap<String, String>();
        }
        return headers;
    }

    @Override
    public String getBodyContentType() {
        return entity.getContentType().getValue();
    }

    @Override
    public byte[] getBody() throws AuthFailureError {
        ByteArrayOutputStream bos = new ByteArrayOutputStream();
        try{
            entity.writeTo(bos);
        } catch (IOException e) {
            VolleyLog.e("IOException writing to ByteArrayOutputStream");
        }
        return bos.toByteArray();
    }

    private void buildMultipartEntity() {
        if (mFileParts != null && mFileParts.size() > 0) {
            for (File file : mFileParts) {
                entity.addPart(mFilePartName, new FileBody(file));
            }
            long l = entity.getContentLength();
            Log.i("YanZi-volley", mFileParts.size() + "个,长度:" + l);
        }

        try {
            if (mParams != null && mParams.size() > 0) {
                for (Map.Entry<String, String> entry : mParams.entrySet()) {
                    entity.addPart(
                            entry.getKey(),
                            new StringBody(entry.getValue(), Charset
                                    .forName("UTF-8")));
                }
            }
        } catch (UnsupportedEncodingException e) {
            VolleyLog.e("UnsupportedEncodingException");
        }
    }
}

使用的话new一个request,然后add到queue里就可以了,我就不写示例了。下次介绍android上传/下载文件带进度条的实现。

参考:CodeIgniter http://codeigniter.org.cn/

---------------本文系原创,转载注明作者yanzi1225627


2015-12-30补充说明:android端的测试demo我已经传到了git,https://github.com/yanzi1225627/TestMultipartRequest,欢迎大家fork。友情提示那个key要写 f_file[],不要写f_file.


欢迎大家加入PHP CodeIgniter社区群460132647,备注yanzi





springmvc服务端+android客户端的文件上传

一、Springmvc服务端 1.引入文件上传的JAR包commons-fileupload-1.2.jar,commons-io-1.3.2.jar.     2.          ...

Android Volley框架的几种post提交请求方式及上传文件(Https单双向认证)

引用:http://www.open-open.com/lib/view/open1407727047207.html 首先简单描述一下Google的Android开发团队在2013年推出的一个网...
  • ShareUs
  • ShareUs
  • 2016年06月12日 16:31
  • 3181

Android volley 解析(三)之文件上传篇

android volley 不仅仅只有请求数据的功能,这里教大家如何通过 volley 框架实现文件的上传...
  • jxxfzgy
  • jxxfzgy
  • 2015年03月05日 08:22
  • 16182

Android Volley文件上传(一)

对于Volley的使用这里不做介绍,不清楚的自己找资料了解,我给大家介绍的是使用Volley网络框架来实现上传文件功能,因为volley没有自带上传文件功能,因此只能自己实现。而实现Volley文件上...

SpringMVC+Volley实现Android端上传文件

Android端使用的是Volley的Request基类,实现它的几个方法,以拼接表单的方式来上传文件 服务器端则是采用Spring框架来接收文件。 一、Android:三个类:MainActiv...

Android Volley解析(二)之表单提交篇

上一篇文章中,讲了 Volley 的 get 和 post 请求,并且对 volley 的基本使用和基本分析做了讲解,而这篇 blog 将讲解用 volley 实现表单的提交,在看这篇文章之前,如果对...
  • jxxfzgy
  • jxxfzgy
  • 2015年03月09日 16:09
  • 7817

[volley文件上传]Android中自定义MultipartEntity实现文件上传以及使用Volley库实现文件上传

版权声明:本文为Mr.Simple原创文章,未经允许不得转载。 目录(?)[+] 在开发中,我们使用的比较多的HTTP请求方式基本上就是GET、POST。其中GET用于从服务器获取数据...

android中常见的内存溢出和解决办法

 android中的内存溢出估计大多数人在写代码的时候都出现过,其实突然觉得工作一年和工作三年的区别是什么呢,其实干的工作也许都一样,产品汪看到的结果也都一样,那区别就是速度和质量了。 写在前...

android 6.0 以后的动态权限管理

在android 6.0 以后的系统中授权管理已经和以前有了重大的不同了。以前我们做android是直接在AndroidManifest里面加上就OK了。不过现在不同了。需要用户在使用的过程中进行动态...

PHP服务端项目开发经历——解决Android客户端中多图片上传的问题

最近和同学在做一个App,自己负责整个服务器端的代码。 之前做过的web项目(网页开发)中,也遇到过多图片上传的问题,当时的解决方案是将上传图片使用数组传递,根据需要通过js动态添加上传文件的个数,p...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:服务器基于PHP CodeIgniter,Android基于Volley实现多文件/图片上传(含服务器,web版和android客户端完整代码)
举报原因:
原因补充:

(最多只允许输入30个字)