Web server部分 |
用phpMyAdmin创建数据中的表photos。用于存放image的路径 |
|
CREATE TABLE `a2393827_db`.`photos` ( `id`INTNOTNULLAUTO_INCREMENT, ) ENGINE= MYISAM |
现在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); |
现在我们服务器部分的程序已经完成。如下面的截图 |
测试方法: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的影响。只能等下次再找找问题。或转变一中图片上传方式。) |
|
下面将进入下一个阶段---下载已经上传的图片 |
在一个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>
|
下面为显示自定义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; } }
|
下面我们需要从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); } } }
|
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]); } }
|
现在所有工作已经完成,你运行测试你的代码 |
|
|
使用PhpMysql实现图片文件上传下载
最新推荐文章于 2025-07-27 09:05:29 发布
