آموزش آپلود تصاویر با استفاده از volley
۲۱ اسفند ۹۶ ، ۱۲:۱۴
سجاد یوسف نیا ۰ نظر Share

آموزش آپلود تصاویر با استفاده از volley

در این آموزش من میخوام که به شما نحوه ی آپلود کردن تصویر بر روی سرور رو به شما آموزش بدم، استفاده از کتابخونه ی volley بهترین راه و سریع ترین راه برای انجام این کار هست. خب بدون هیچ مقدمه ای میریم سراغ اصل مطلب:

دانلود کد

مرحله ی اول : یک فایل php به نام uploadImage.php بسازید و کد زیر رو داخلش بنویسید. این یک کد phpی سمت سروره که برای ذخیره کردن تصویر روی سرور استفاده میشه.

<?php

if (!empty($_POST['image']) ) {

$image = json_decode($_POST['image'], true);

$file_data = array();

$file_data['file_name'] = 'image-name';

$file_data['upload_location'] = $upload_location;

$filename = 'image-name'; //change as per your need

$uploaded_file = uploadimage($image, $filename);

if($uploaded_file !== false) {

echo 'Image has been uploaded.'

}

}

function uploadimage($file, $filename) {

try {

$extension = getExtension($file['type']);

$filename = $filename . ".". $extension;// path and name of image, change as per your need

if($extension == '') {

$extension = 'jpg';

}

$file['data'] = str_replace(" ", "+", $file['data']);

$binarydata = base64_decode($file['data']);

$result = file_put_contents($filename, $binarydata);

if($result) {

@chmod($filename, 0777);

return $filename;

} else {

return false;

}

return false;

} catch (Exception $e) {

return false;

}

}

function getExtension($type) {

$type_array = explode("?",$type);

$type = trim($type_array[0]);

$type = str_replace("\/", "/", $type);

if ($type == "image/gif") {

return 'gif';

}

if($type == "image/jpeg") {

return 'jpeg';

}

if($type == "image/jpg") {

return 'jpg';

}

if($type == "image/pjpeg") {

return 'pjpeg';

}

if($type == "image/x-png") {

return 'x-png';

}

if($type == "image/png") {

return 'png';

}

if($type == "application/octet-stream") {

return 'png';

}

if($type == "image/tiff") {

return 'tiff';

}

if($type == "image/cms") {

return 'cms';

}

}

مرحله ی 2 : یک پروژه ی جدید در اندروید استودیو بسازین.

مرحله ی 3 : dependency پایینی رو به فایل Gradle اضافه کنین.
compile 'com.mcxiaoke.volley:library-aar:1.0.0'

حالا dependency باید یه چیزی شبیه به پایینی بشه :

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.mcxiaoke.volley:library-aar:1.0.0'
مرحله ی 4 : یک فایل layout با اسم activity_main.xml بسازین.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/layoutProfile"
    android:background="#ffffff"
    android:layout_height="match_parent">


        <ImageView
            android:id="@+id/user_profile_photo"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_centerHorizontal="true"
            android:layout_centerInParent="true"
            android:layout_marginTop="-60dp"
            android:elevation="5dp"
            android:scaleType="centerCrop"
            android:src="@android:drawable/ic_menu_camera" />

            <Button android:id="@+id/btnSubmit"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="3dp"
                android:layout_marginTop="15dp"
                android:text="Save"
                android:textColor="#fff"
                android:drawablePadding="10dp"
                android:layout_alignParentBottom="true"
                android:gravity="center"
                android:textStyle="bold"
                android:background="@color/colorPrimary"
                android:textSize="20sp"
                android:clickable="true"
                android:elevation="4dp"
                android:padding="20dp" />

</RelativeLayout>

مرحله ی 5 :یک کلاس به اسم AppController.java بسازین و کد پایینی رو بهش اضافه کنین. موقع آپلود تصویر انتخاب شده به سرور، این کلاس همه ی فراخوانی شبکه ای ( Networking call ) رو از طرف دستگاه به طرف سرور انجام میده.
package code.imageupload.androidkeeda.com.imageupload;

/**
 * Created by Coding Geek on 2/21/2017.
 */
import android.app.Application;
import android.content.Context;
import android.support.multidex.MultiDex;
import android.text.TextUtils;

import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.Volley;

public class AppController extends Application {

    public static final String TAG = AppController.class.getSimpleName();

    private RequestQueue mRequestQueue;
    private ImageLoader mImageLoader;
    LruBitmapCache mLruBitmapCache;

    private static AppController mInstance;

    @Override
    public void onCreate() {
        super.onCreate();
        mInstance = this;
    }

    @Override
    protected void attachBaseContext(Context base) {
        super.attachBaseContext(base);
        MultiDex.install(this);
    }

    public static synchronized AppController getInstance() {
        return mInstance;
    }

    public RequestQueue getRequestQueue() {
        if (mRequestQueue == null) {
            mRequestQueue = Volley.newRequestQueue(getApplicationContext());
        }

        return mRequestQueue;
    }

    public ImageLoader getImageLoader() {
        getRequestQueue();
        if (mImageLoader == null) {
            getLruBitmapCache();
            mImageLoader = new ImageLoader(this.mRequestQueue, mLruBitmapCache);
        }

        return this.mImageLoader;
    }

    public LruBitmapCache getLruBitmapCache() {
        if (mLruBitmapCache == null)
            mLruBitmapCache = new LruBitmapCache();
        return this.mLruBitmapCache;
    }

    public <T> void addToRequestQueue(Request<T> req, String tag) {
        req.setTag(TextUtils.isEmpty(tag) ? TAG : tag);
        getRequestQueue().add(req);
    }

    public <T> void addToRequestQueue(Request<T> req) {
        req.setTag(TAG);
        getRequestQueue().add(req);
    }

    public void cancelPendingRequests(Object tag) {
        if (mRequestQueue != null) {
            mRequestQueue.cancelAll(tag);
        }
    }
}

مرحله ی 6 : یک کلاس به اسم  LruBitmapCache.java بسازید و کد زیر رو بهش به این فایل اضافه کنید. این کلاس تصویر رو موقع آپلود شدن یا دانلود از سرور ، مدیریت میکنه.

 
package code.imageupload.androidkeeda.com.imageupload;

/**
 * Created by Coding Geek on 7/23/2017.
 */

import android.graphics.Bitmap;
import android.support.v4.util.LruCache;

import com.android.volley.toolbox.ImageLoader.ImageCache;

public class LruBitmapCache extends LruCache<String, Bitmap> implements
        ImageCache {
    public static int getDefaultLruCacheSize() {
        final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);
        final int cacheSize = maxMemory / 8;

        return cacheSize;
    }

    public LruBitmapCache() {
        this(getDefaultLruCacheSize());
    }

    public LruBitmapCache(int sizeInKiloBytes) {
        super(sizeInKiloBytes);
    }

    @Override
    protected int sizeOf(String key, Bitmap value) {
        return value.getRowBytes() * value.getHeight() / 1024;
    }

    @Override
    public Bitmap getBitmap(String url) {
        return get(url);
    }

    @Override
    public void putBitmap(String url, Bitmap bitmap) {
        put(url, bitmap);
    }
}

مرحله ی 7 : یک کلاس به اسم Utiity.java بسازین و کد زیر رو به این فایل اضافه کنین. این کلاس مدیریت کننده ی مشکل دسترسی دسترسی در اندروید مارشمالو و نسخه ی های بعدیه.

package code.imageupload.androidkeeda.com.imageupload;

import android.Manifest;
import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.content.DialogInterface;
import android.content.pm.PackageManager;
import android.os.Build;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AlertDialog;

public class Utility {
    public static final int MY_PERMISSIONS_REQUEST_READ_EXTERNAL_STORAGE = 123;

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    public static boolean checkPermission(final Context context)
    {
        int currentAPIVersion = Build.VERSION.SDK_INT;
        if(currentAPIVersion>=android.os.Build.VERSION_CODES.M)
        {
            if (ContextCompat.checkSelfPermission(context, Manifest.permission.READ_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {
                if (ActivityCompat.shouldShowRequestPermissionRationale((Activity) context, Manifest.permission.READ_EXTERNAL_STORAGE)) {
                    AlertDialog.Builder alertBuilder = new AlertDialog.Builder(context);
                    alertBuilder.setCancelable(true);
                    alertBuilder.setTitle("Permission necessary");
                    alertBuilder.setMessage("External storage permission is necessary");
                    alertBuilder.setPositiveButton(android.R.string.yes, new DialogInterface.OnClickListener() {
                        @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
                        public void onClick(DialogInterface dialog, int which) {
                            ActivityCompat.requestPermissions((Activity) context, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, MY_PERMISSIONS_REQUEST_READ_EXTERNAL_STORAGE);
                        }
                    });
                    AlertDialog alert = alertBuilder.create();
                    alert.show();

                } else {
                    ActivityCompat.requestPermissions((Activity) context, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, MY_PERMISSIONS_REQUEST_READ_EXTERNAL_STORAGE);
                }
                return false;
            } else {
                return true;
            }
        } else {
            return true;
        }
    }
}

مرحله ی 8 :یک کلاس به اسم AppConfig.java بسازین و کد زیر رو به این فایل اضافه کنین. توی این کلاس ما URL مربوط به web service رو قرار میدیم، بنابراین URL وب سرویس خودتون رو پایین جایگزین کنین.

package code.imageupload.androidkeeda.com.imageupload;

/**
 * Created by Coding Geek on 2/21/2017.
 */
public class AppConfig {

    // local
    public static String BASE_URL = "http://192.168.20.137/webservicev2/";

    public static String uploadImage = BASE_URL + "uploadImage.php";
}

مرحله ی 9 : خب کد نهایی برای فایل MainActivity.java باید به شکل زیر باشه.

package code.imageupload.androidkeeda.com.imageupload;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.graphics.Bitmap;
import android.os.Environment;
import android.provider.MediaStore;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Base64;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;

import org.json.JSONException;
import org.json.JSONObject;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

    ImageView user_profile_photo;
    String message, encodedImage;
    Button btnSubmit;
    private ProgressDialog pDialog;
    private int REQUEST_CAMERA = 0, SELECT_FILE = 1;
    private String userChoosenTask;
    Bitmap thumbnail = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        user_profile_photo = (ImageView) findViewById(R.id.user_profile_photo);
        btnSubmit = (Button) findViewById(R.id.btnSubmit);

        // Progress dialog
        pDialog = new ProgressDialog(this);
        pDialog.setCancelable(false);
        ButtonClick();
    }

    public void ButtonClick() {

        btnSubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                            String image = getStringImage(thumbnail);

                            JSONObject imageObject = new JSONObject();
                            try {
                                imageObject.put("size", "1000");
                                imageObject.put("type", "image/jpeg");
                                imageObject.put("data", image);
                            } catch (JSONException e) {
                                e.printStackTrace();
                            }

                            updateProfile(String.valueOf(imageObject));
            }
        });

        user_profile_photo.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                selectImage();
                return false;
            }
        });
    }

    private void updateProfile(final String image) {
        // Tag used to cancel the request
        String tag_string_req = "req_register";

        pDialog.setMessage("Please wait ...");
        showDialog();

        StringRequest strReq = new StringRequest(Request.Method.POST, AppConfig.uploadImage, new Response.Listener<String>() {

            @Override
            public void onResponse(String response) {
                hideDialog();

                try {
                    JSONObject jObj = new JSONObject(response);
                    boolean error = jObj.getBoolean("status");
                    message = jObj.getString("message");
                    if (error) {

                        Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();


                    } else {

                        // Error occurred in registration. Get the error
                        // message
                        String errorMsg = jObj.getString("message");
                        Toast.makeText(MainActivity.this, errorMsg, Toast.LENGTH_LONG).show();
                    }
                } catch (JSONException e) {
                    e.printStackTrace();
                }

            }
        }, new Response.ErrorListener() {

            @Override
            public void onErrorResponse(VolleyError error) {
                Toast.makeText(MainActivity.this, "Oops something went wrong...", Toast.LENGTH_LONG).show();
                hideDialog();
            }
        }) {

            @Override
            protected Map<String
                    , String> getParams() {
                // Posting params to register url
                Map<String, String> params = new HashMap<String, String>();
                params.put("image", image);

                return params;
            }

        };

        // Adding request to request queue
        AppController.getInstance().addToRequestQueue(strReq, tag_string_req);
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
        switch (requestCode) {
            case Utility.MY_PERMISSIONS_REQUEST_READ_EXTERNAL_STORAGE:
                if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                    if (userChoosenTask.equals("Take Photo"))
                        cameraIntent();
                    else if (userChoosenTask.equals("Choose from Library"))
                        galleryIntent();
                } else {
                    //code for deny
                }
                break;
        }
    }

    private void selectImage() {
        final CharSequence[] items = {"Take Photo", "Choose from Library",
                "Cancel"};

        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("Add Photo!");
        builder.setItems(items, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int item) {
                boolean result = Utility.checkPermission(MainActivity.this);

                if (items[item].equals("Take Photo")) {
                    userChoosenTask = "Take Photo";
                    if (result)
                        cameraIntent();

                } else if (items[item].equals("Choose from Library")) {
                    userChoosenTask = "Choose from Library";
                    if (result)
                        galleryIntent();

                } else if (items[item].equals("Cancel")) {
                    dialog.dismiss();
                }
            }
        });
        builder.show();
    }

    private void galleryIntent() {
        Intent intent = new Intent();
        intent.setType("image/*");
        intent.setAction(Intent.ACTION_GET_CONTENT);//
        startActivityForResult(Intent.createChooser(intent, "Select File"), SELECT_FILE);
    }

    private void cameraIntent() {
        Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        startActivityForResult(intent, REQUEST_CAMERA);
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (resultCode == Activity.RESULT_OK) {
            if (requestCode == SELECT_FILE)
                onSelectFromGalleryResult(data);
            else if (requestCode == REQUEST_CAMERA)
                onCaptureImageResult(data);
        }
    }

    private void onCaptureImageResult(Intent data) {
        thumbnail = (Bitmap) data.getExtras().get("data");
        ByteArrayOutputStream bytes = new ByteArrayOutputStream();
        thumbnail.compress(Bitmap.CompressFormat.JPEG, 90, bytes);

        File destination = new File(Environment.getExternalStorageDirectory(),
                System.currentTimeMillis() + ".jpg");

        FileOutputStream fo;
        try {
            destination.createNewFile();
            fo = new FileOutputStream(destination);
            fo.write(bytes.toByteArray());
            fo.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        user_profile_photo.setImageBitmap(thumbnail);
    }

    @SuppressWarnings("deprecation")
    private void onSelectFromGalleryResult(Intent data) {
        if (data != null) {
            try {
                thumbnail = MediaStore.Images.Media.getBitmap(MainActivity.this.getContentResolver(), data.getData());
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        user_profile_photo.setImageBitmap(thumbnail);
    }

    public String getStringImage(Bitmap bmp){
        try {
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            bmp.compress(Bitmap.CompressFormat.JPEG,60, baos);
            byte[] imageBytes = baos.toByteArray();
            encodedImage = Base64.encodeToString(imageBytes, Base64.DEFAULT);
            return encodedImage;
        }catch (Exception e){

        }
        return encodedImage;
    }

    private void showDialog() {
        if (!pDialog.isShowing())
            pDialog.show();
    }

    private void hideDialog() {
        if (pDialog.isShowing())
            pDialog.dismiss();
    }
}

سورس برنامه رو می تونید از اینجا دانلود کنید.

خروجی نهایی به صورت زیره :
لطفا در کانال آموزشی اندروید ما عضو بشید:
androidsenior@

نظرات (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی

تصاوير منتخب