使用PhpMysql实现图片文件上传下载

最新推荐文章于 2025-07-27 09:05:29 发布

原创最新推荐文章于 2025-07-27 09:05:29 发布 · 2.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#android #php #Mysql #upload #download

Android开发知识体系专栏收录该内容

100 篇文章

订阅专栏

本文详细介绍了如何使用PHP和MySQL在服务器端实现图片上传功能，并展示了如何在Android应用中下载已上传的图片。包括创建数据库表、编写连接数据库的PHP脚本、处理上传和下载流程等步骤。

Web server部分

用phpMyAdmin创建数据中的表photos。用于存放image的路径

CREATE TABLE `a2393827_db`.`photos` (

`id`INTNOTNULLAUTO_INCREMENT,
`image`VARCHAR(300)CHARACTERSETutf8COLLATEutf8_unicode_ciNOTNULL,
PRIMARYKEY(`id`)

) ENGINE= MYISAM

Now, in your server create a new directory. I created PhotoUpload
Inside the directory you need a script to connect to your database. So create a script name dbConnect.php and write the following code

现在members.000webhost.com/login的FileManger（web文件管理器）创建用于存放上传图片的目录。PhotoUpload，当然你也可以用其他方法创建，比如ftp工具。

在这个目录里你需要一个脚本去连接数据库。在此创建dbConnect.php脚本。

现在你需要再一个脚本用于处理image的upload。这个文件命名为upload.php

完成3个php脚本

脚本1：dbConnect.php 数据库连接

<?php

define('HOST','mysql.hostinger.in');

define('USER','u502452270_andro');

define('PASS','belal_123');

define('DB','u502452270_andro');

$con =mysqli_connect(HOST,USER,PASS,DB) or die('Unable to Connect');

脚本2：upload.php

现在你需要再一个脚本用于处理image的upload。这个文件命名为

<?php

if($_SERVER['REQUEST_METHOD']=='POST'){

$image = $_POST['image'];

require_once('dbConnect.php');

$sql ="SELECT id FROM photos ORDER BY id ASC";

$res = mysqli_query($con,$sql);

$id = 0;

while($row = mysqli_fetch_array($res)){

$id = $row['id'];

}

$path ="uploads/$id.png";

$actualpath ="http://zhiguicai.comli.com/PhotoUpload//$path";

$sql ="INSERT INTO photos (image) VALUES ('$actualpath')";

if(mysqli_query($con,$sql)){

file_put_contents($path,base64_decode($image));

echo"Successfully Uploaded";

}

mysqli_close($con);

}else{

echo"Error";

}

脚本3：getAllImages.php

上面的脚本处理上传。它将存image文件到指定的 uploads路径，所有你也需要创建一个目录名为uploads

上面的脚本存储image的文件的路径到mysql数据库

所有我们需要image文件的urls。为了得到这个urls我们采用JSON数据格式。

我们创建第3个脚本 getAllImages.php

<?php

require_once('dbConnect.php');

$sql ="select image from photos";

$res = mysqli_query($con,$sql);

$result =array();

while($row = mysqli_fetch_array($res)){

array_push($result,array('url'=>$row['image']));

}

echojson_encode(array("result"=>$result));

mysqli_close($con);

Now our server part is over. You can see below the snapshot of my server’s directory.

现在我们服务器部分的程序已经完成。如下面的截图

测试方法：https://www.youtube.com/watch?v=3tEiiUOLemA&feature=youtu.be

用谷歌查询“byte64 encoder”

选择如图：

http://www.motobit.com/util/base64-decoder-encoder.asp

可以上传图片，并转化为base64格式数据包

并用网上测试post的工具测试是否可以用（奇怪的是在此生成的图片是空的）http://tool.sufeinet.com/httphelper.aspx?url=http://www.cnblogs.com/hongfei/p/3705089.html&type=url

国内在线模拟post：http://www.bejson.com/httputil/httppost2/

http://tool.sufeinet.com/httphelper.aspx?url=http://www.cnblogs.com/hongfei/p/3705089.html&type=url

地址填上：http://zhiguicai.comli.com/PhotoUpload/upload.php

国外在线模拟post：http://www.atool.org/httptest.php

下载chrome浏览器，并为其下载Chrome Poster插件

Android app客户端

创建Android stuido工程：UploadImageUsingPHPMySQL

Main Activity布局如上图

<?xml version="1.0" encoding="utf-8"?>

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:orientation="vertical"

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

  

  

    <Button

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="选择图片文件"

        android:id="@+id/buttonChoose" />

  

    <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:id="@+id/imageView" />

  

  

    <Button

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="上传图片"

        android:id="@+id/buttonUpload" />

  

  

    <Button

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="查看上传的图片"

        android:id="@+id/buttonViewImage" />

  

  

</LinearLayout>

创建一个新类RequestHandler处理我们的http请求  RequestHandler.java

package com.czg.com.uploadimageusingphpmysql;

  

  import java.io.BufferedReader;

  import java.io.BufferedWriter;

  import java.io.InputStreamReader;

  import java.io.OutputStream;

  import java.io.OutputStreamWriter;

  import java.io.UnsupportedEncodingException;

  import java.net.HttpURLConnection;

  import java.net.URL;

  import java.net.URLEncoder;

  import java.util.HashMap;

  import java.util.Map;

  

  import javax.net.ssl.HttpsURLConnection;

  

  /**

 * Created by czg on 2016/1/12.

 */

  public class RequestHandler {

  

    public String sendPostRequest(String requestURL,

                                  HashMap<String, String> postDataParams) {

  

        URL url;

  

        StringBuilder sb = new StringBuilder();

        try {

            url = new URL(requestURL);

  

            HttpURLConnection conn = (HttpURLConnection) url.openConnection();

            conn.setReadTimeout(15000);

            conn.setConnectTimeout(15000);

            conn.setRequestMethod("POST");

            conn.setDoInput(true);

            conn.setDoOutput(true);

  

  

            OutputStream os = conn.getOutputStream();

            BufferedWriter writer = new BufferedWriter(

                    new OutputStreamWriter(os, "UTF-8"));

            writer.write(getPostDataString(postDataParams));

  

            writer.flush();

            writer.close();

            os.close();

            int responseCode = conn.getResponseCode();

  

            if (responseCode == HttpsURLConnection.HTTP_OK) {

                BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));

                sb = new StringBuilder();

                String response;

                while ((response = br.readLine()) != null){

                    sb.append(response);

                }

            }

  

        } catch (Exception e) {

            e.printStackTrace();

        }

        return sb.toString();

    }

  

    private String getPostDataString(HashMap<String, String> params) throws UnsupportedEncodingException {

        StringBuilder result = new StringBuilder();

        boolean first = true;

        for (Map.Entry<String, String> entry : params.entrySet()) {

            if (first)

                first = false;

            else

                result.append("&");

  

            result.append(URLEncoder.encode(entry.getKey(), "UTF-8"));

            result.append("=");

            result.append(URLEncoder.encode(entry.getValue(), "UTF-8"));

        }

  

        return result.toString();

    }

}

现在在MainActivity.java写下如下代码，是其完成上传功能

package com.czg.com.uploadimageusingphpmysql;

  

  import android.app.ProgressDialog;

  import android.content.Intent;

  import android.graphics.Bitmap;

  import android.net.Uri;

  import android.os.AsyncTask;

  import android.provider.MediaStore;

  import android.support.v7.app.AppCompatActivity;

  import android.os.Bundle;

  import android.util.Base64;

  import android.view.View;

  import android.widget.Button;

  import android.widget.ImageView;

  import android.widget.Toast;

  

  import java.io.ByteArrayOutputStream;

  import java.io.IOException;

  import java.util.HashMap;

  

  public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    public static final String UPLOAD_URL = "http://zhiguicai.comli.com/PhotoUpload/upload.php";

    public static final String UPLOAD_KEY = "image";

  

  

  

    private int PICK_IMAGE_REQUEST = 1;

  

    private Button buttonChoose;

    private Button buttonUpload;

    private Button buttonView;

  

    private ImageView imageView;

  

    private Bitmap bitmap;

  

    private Uri filePath;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

  

        buttonChoose = (Button) findViewById(R.id.buttonChoose);

        buttonUpload = (Button) findViewById(R.id.buttonUpload);

        buttonView = (Button) findViewById(R.id.buttonViewImage);

  

        imageView = (ImageView) findViewById(R.id.imageView);

  

        buttonChoose.setOnClickListener(this);

        buttonUpload.setOnClickListener(this);

        buttonView.setOnClickListener(this);

    }

    //在相册中选择图片

    private void showFileChooser() {

        Intent intent = new Intent();

        intent.setType("image/*");

        intent.setAction(Intent.ACTION_GET_CONTENT);

        startActivityForResult(Intent.createChooser(intent, "Select Picture"), PICK_IMAGE_REQUEST);

    }

  

    //图片选择后响应（根据选择的路径）

    @Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {

        super.onActivityResult(requestCode, resultCode, data);

  

        if (requestCode == PICK_IMAGE_REQUEST && resultCode == RESULT_OK && data != null && data.getData() != null) {

  

            filePath = data.getData();

            try {

                bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), filePath);

                imageView.setImageBitmap(bitmap);

            } catch (IOException e) {

                e.printStackTrace();

            }

        }

    }

  

  

  //图片转化为Base64格式的字符串

    public String getStringImage(Bitmap bmp){

        ByteArrayOutputStream baos = new ByteArrayOutputStream();

        bmp.compress(Bitmap.CompressFormat.JPEG, 100, baos);

        byte[] imageBytes = baos.toByteArray();

        String encodedImage = Base64.encodeToString(imageBytes, Base64.DEFAULT);

        return encodedImage;

    }

  //上传图片

    private void uploadImage(){

        class UploadImage extends AsyncTask<Bitmap,Void,String> {

  

            ProgressDialog loading;

            RequestHandler rh = new RequestHandler();

  

            @Override

            protected void onPreExecute() {

                super.onPreExecute();

                loading = ProgressDialog.show(MainActivity.this, "请耐心等候，图片Uploading...", null, true, true);

            }

  

            @Override

            protected void onPostExecute(String s) {

                super.onPostExecute(s);

                loading.dismiss();

                Toast.makeText(getApplicationContext(), s, Toast.LENGTH_LONG).show();

            }

  

            @Override

            protected String doInBackground(Bitmap... params) {

                Bitmap bitmap = params[0];

                String uploadImage = getStringImage(bitmap);  //图片转化为byte64格式字符串

  

                HashMap<String,String> data = new HashMap<>();

  

                data.put(UPLOAD_KEY, uploadImage);  //填入post key，及数据（即图片信息）

                String result = rh.sendPostRequest(UPLOAD_URL,data);

  

                return result;

            }

        }

  

        UploadImage ui = new UploadImage();

        ui.execute(bitmap);

    }

  

    @Override

    public void onClick(View v) {

        if (v == buttonChoose) {

            showFileChooser();

        }

  

        if(v == buttonUpload){

            uploadImage();

        }

  

        if(v == buttonView){

            viewImage();

        }

    }

    private void viewImage() {

       // startActivity(new Intent(this, ImageListView.class));

    }

}

到这里你程序基本上实现了上传的功能，不过不要忘记在androidManifest.xml中添加app的上网权限。

<uses-permission android:name="android.permission.INTERNET" />

加完权限代码，你可以测试运行app是否可以上传文件

我亲测上传成功（问题小的图片可以上传，大的图片无法上传。不知是什么问题。具体原因是文件大小受到byte64的影响。只能等下次再找找问题。或转变一中图片上传方式。）

Now the lets move to the next part which is downloading uploaded images.

下面将进入下一个阶段---下载已经上传的图片

在一个ListView控件中显示已经上传的图片

在此你必须通过前一阶段的app上传一些图片到web服务器上。因为我们马上要去下载这些已经上传上去的图片。如果你有100s or 1000s images打算显示在ListView中。你不要继续后面的代码。而应该用list的效果。应该看点击查看其它教程。

Android Adding Items to List on Scroll

n 把// startActivity(new Intent(this, ImageListView.class));的注释取消，这是会产生一个错误。我们需要创建一个新的Activity

n 创建一个blank activity（ImageListView）

n 现在我们将点击“查看上传图片”按钮，这个Activity将被打开

n 这这个activity我们放置一个ListView。（我们进入activity_image_list_view.xml）代码如下

<?xml version="1.0" encoding="utf-8"?>

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:orientation="vertical"

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    tools:context="net.simplifiedcoding.imageuploadsample.ImageListView">

  

  

    <ListView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:id="@+id/listView" />

  

</LinearLayout>

n          我们必须创建一个自定义ListView。我们新建一个xml资源文件给自定义ListView。

n          在此新建xml资源文件image_list_view.xml

<?xml version="1.0" encoding="utf-8"?>

  

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="horizontal"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content">

  

    <ImageView android:id="@+id/imageDownloaded"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/abc_ic_menu_copy_mtrl_am_alpha"/>

  

    <TextView android:id="@+id/textViewURL"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"/>

  

</LinearLayout>

Now create a new class named CustomList for our Custom List View.

下面为显示自定义List创建一个新类。CustomList extends ArrayAdapter

package com.czg.com.uploadimageusingphpmysql;

  import android.app.Activity;

  import android.content.Context;

  import android.graphics.Bitmap;

  import android.view.LayoutInflater;

  import android.view.View;

  import android.view.ViewGroup;

  import android.widget.ArrayAdapter;

  import android.widget.ImageView;

  import android.widget.TextView;

  

  /**

 * Created by czg on 2016/1/13.

 */

  public class CustomList extends ArrayAdapter<String> {

    private String[] urls;

    private Bitmap[] bitmaps;

    private Activity context;

  

    public CustomList(Activity context, String[] urls, Bitmap[] bitmaps) {

        super(context, R.layout.image_list_view, urls);

        this.context = context;

        this.urls= urls;

        this.bitmaps= bitmaps;

    }

  

    @Override

    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = context.getLayoutInflater();

        View listViewItem = inflater.inflate(R.layout.image_list_view, null, true);

        TextView textViewURL = (TextView) listViewItem.findViewById(R.id.textViewURL);

        ImageView image = (ImageView) listViewItem.findViewById(R.id.imageDownloaded);

  

        textViewURL.setText(urls[position]);

        image.setImageBitmap(Bitmap.createScaledBitmap(bitmaps[position],100,50,false));

        return  listViewItem;

    }

}

Now we need to fetch all the Bitmaps from server. So for this we will create a new class. I created GetAlImages.java

下面我们需要从web server上获取所有已经上传的Bitmaps图片。所有我们需要创建一个新类用于获取图片GetAlImages.java

package com.czg.com.uploadimageusingphpmysql;

  import android.app.ProgressDialog;

  import android.graphics.Bitmap;

  import android.graphics.BitmapFactory;

  import android.os.AsyncTask;

  

  import org.json.JSONArray;

  import org.json.JSONException;

  import org.json.JSONObject;

  

  import java.io.IOException;

  import java.net.MalformedURLException;

  import java.net.URL;

  

  /**

 * Created by czg on 2016/1/13.

 */

  public class GetAlImages {

  

    public static String[] imageURLs;

    public static Bitmap[] bitmaps;

  

    public static final String JSON_ARRAY="result";

    public static final String IMAGE_URL = "url";

    private String json;

    private JSONArray urls;

  

    public GetAlImages(String json){

        this.json = json;

        try {

            JSONObject jsonObject = new JSONObject(json);

            urls = jsonObject.getJSONArray(JSON_ARRAY);

        } catch (JSONException e) {

            e.printStackTrace();

        }

    }

  

    private Bitmap getImage(JSONObject jo){

        URL url = null;

        Bitmap image = null;

        try {

            url = new URL(jo.getString(IMAGE_URL));

            image = BitmapFactory.decodeStream(url.openConnection().getInputStream());

        } catch (MalformedURLException e) {

            e.printStackTrace();

        } catch (IOException e) {

            e.printStackTrace();

        } catch (JSONException e) {

            e.printStackTrace();

        }

        return image;

    }

  

    public void getAllImages() throws JSONException {

        bitmaps = new Bitmap[urls.length()];

  

        imageURLs = new String[urls.length()];

  

        for(int i=0;i<urls.length();i++){

            imageURLs[i] = urls.getJSONObject(i).getString(IMAGE_URL);

            JSONObject jsonObject = urls.getJSONObject(i);

            bitmaps[i]=getImage(jsonObject);

        }

    }

}

We will pass the json string having all the urls of our images to the constructor of this class.
We will get the json string having all the urls from our getAllImages.php script.
Now come to ImageListView.java class and write the following code

n          我们将在这构造函数传入json字符串。

n          并解析这个Json数据是由getAllImages.php脚本返回。可以用浏览器测试如下

n          现在我们进入ImageListView.java代码并写下如下代码。

package com.czg.com.uploadimageusingphpmysql;

  

  import android.app.ProgressDialog;

  import android.content.Intent;

  import android.os.AsyncTask;

  import android.support.v7.app.AppCompatActivity;

  import android.os.Bundle;

  import android.view.View;

  import android.widget.AdapterView;

  import android.widget.ListView;

  

  import org.json.JSONException;

  

  import java.io.BufferedReader;

  import java.io.InputStreamReader;

  import java.net.HttpURLConnection;

  import java.net.URL;

  

  public class ImageListView extends AppCompatActivity implements AdapterView.OnItemClickListener {

    private ListView listView;

  

    public static final String GET_IMAGE_URL="http://zhiguicai.comli.com/PhotoUpload/getAllImages.php";

  

    public GetAlImages getAlImages;

  

    public static final String BITMAP_ID = "BITMAP_ID";

  

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_image_list_view);

  

        listView = (ListView) findViewById(R.id.listView);

        listView.setOnItemClickListener(this);

        getURLs();

    }

    private void getImages(){

        class GetImages extends AsyncTask<Void,Void,Void> {

            ProgressDialog loading;

            @Override

            protected void onPreExecute() {

                super.onPreExecute();

                loading = ProgressDialog.show(ImageListView.this,"正在下载图片。。。","请稍等片刻...",false,false);

            }

  

            @Override

            protected void onPostExecute(Void v) {

                super.onPostExecute(v);

                loading.dismiss();

                //Toast.makeText(ImageListView.this,"Success",Toast.LENGTH_LONG).show();

                CustomList customList = new CustomList(ImageListView.this,GetAlImages.imageURLs,GetAlImages.bitmaps);

                listView.setAdapter(customList);

            }

  

            @Override

            protected Void doInBackground(Void... voids) {

                try {

                    getAlImages.getAllImages();

  

                } catch (JSONException e) {

                    e.printStackTrace();

                }

                return null;

            }

        }

        GetImages getImages = new GetImages();

        getImages.execute();

    }

  

    private void getURLs() {

        class GetURLs extends AsyncTask<String,Void,String>{

            ProgressDialog loading;

  

            @Override

            protected void onPreExecute() {

                super.onPreExecute();

                loading = ProgressDialog.show(ImageListView.this,"下载中...","请等待...",true,true);

            }

  

            @Override

            protected void onPostExecute(String s) {

                super.onPostExecute(s);

                loading.dismiss();

                getAlImages = new GetAlImages(s);

                getImages();

            }

  

            @Override

            protected String doInBackground(String... strings) {

                BufferedReader bufferedReader = null;

                try {

                    URL url = new URL(strings[0]);

                    HttpURLConnection con = (HttpURLConnection) url.openConnection();

                    StringBuilder sb = new StringBuilder();

  

                    bufferedReader = new BufferedReader(new InputStreamReader(con.getInputStream()));

  

                    String json;

                    while((json = bufferedReader.readLine())!= null){

                        sb.append(json+"\n");

                    }

  

                    return sb.toString().trim();

  

                }catch(Exception e){

                    return null;

                }

            }

        }

        GetURLs gu = new GetURLs();

        gu.execute(GET_IMAGE_URL);

    }

  

    @Override

    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

        Intent intent = new Intent(this, ViewFullImage.class);

        intent.putExtra(BITMAP_ID,position);

        startActivity(intent);

    }

}

到这一步代码会报错，（因为我们还没有创建ViewFullImage类）

现在我们创建一个新的activity用于全屏显示图片。新建ViewFullImage。我们在这个视图上添加一个ImageView用于显示图片。

Xml布局文件如下(activity_view_full_image.xml)

<?xml version="1.0" encoding="utf-8"?>

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    tools:context="net.simplifiedcoding.imageuploadsample.ViewFullImage">

  

  

    <ImageView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:id="@+id/imageViewFull"

        />

</RelativeLayout>

ViewFullImage 类代码如下：ViewFullImage.java

package com.czg.com.uploadimageusingphpmysql;

  

  import android.content.Intent;

  import android.support.v7.app.AppCompatActivity;

  import android.os.Bundle;

  import android.widget.ImageView;

  

  public class ViewFullImage extends AppCompatActivity {

    private ImageView imageView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_view_full_image);

  

        Intent intent = getIntent();

        int i = intent.getIntExtra(ImageListView.BITMAP_ID,0);

  

        imageView = (ImageView) findViewById(R.id.imageViewFull);

        imageView.setImageBitmap(GetAlImages.bitmaps[i]);

    }

}

现在所有工作已经完成，你运行测试你的代码

源码下载：https://yunpan.cn/crxSdtRknEtFt  访问密码 0ef7