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

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 createdGetAlImages.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