Entrée de fichier HTML dans android webview (android 4.4, kitkat)

si quelqu'un est toujours à la recherche d'une solution pour entrer des données en utilisant un webview sur kitkat.

openFileChooser Non appelé lorsque est cliqué sur android 4.4

https://code.google.com/p/android/issues/detail?id=62220

une bibliothèque à base de chrome appelée Crosswalk peut être utilisée pour résoudre ce

https://crosswalk-project.org/documentation/downloads.html

Étapes

1. Importer le xwalk_core_library projet android téléchargé à partir du lien ci-dessus dans votre projet comme une bibliothèque

2. Dans votre mise en page xml ajouter le suivant

       <org.xwalk.core.XWalkView
            android:id="@+id/webpage_wv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"          
        />

3. Dans onCreate méthode de votre activité, faire ce qui suit

mXwalkView = (XWalkView) context.findViewById(R.id.webpage_wv);
mXwalkView.setUIClient(new UIClient(mXwalkView));
mXwalkView.load(navigateUrl, null); //navigate url is your page URL

4. ajouter les variables de classe d'activité

   private ValueCallback mFilePathCallback; privé XWalkView mXwalkView

5. la boîte de dialogue d'entrée de fichier doit maintenant s'afficher. Cependant, vous devez fournir des rappels pour obtenir le fichier et l'envoyer au serveur.

6. Vous devez remplacer onActivityResult de votre activité

   public void onActivityResult(int requestCode, int resultCode, Intent intent) {
     super.onActivityResult(requestCode, resultCode, intent);
   
   if (mXwalkView != null) {
   
       if (mFilePathCallback != null) {
           Uri result = intent == null || resultCode != Activity.RESULT_OK ? null
                   : intent.getData();
           if (result != null) {
               String path = MediaUtility.getPath(getActivity(), result);
               Uri uri = Uri.fromFile(new File(path));
               mFilePathCallback.onReceiveValue(uri);
           } else {
               mFilePathCallback.onReceiveValue(null);
           }
       }
   
       mFilePathCallback = null;
   }
   mXwalkView.onActivityResult(requestCode, resultCode, intent);
   
   }
   

7. la classe de Médiautilité peut être trouvée à
   
   obtenir chemin réel de URI, Android KitKat nouveau cadre d'accès au stockage
   
   voir la réponse de Paul Burke

8. pour obtenir l'objet de données pour mFilePathCallback , créer une sous-classe dans votre activité

   class UIClient extends XWalkUIClient {
   public UIClient(XWalkView xwalkView) {
       super(xwalkView);
   }
   
   public void openFileChooser(XWalkView view,
           ValueCallback<Uri> uploadFile, String acceptType, String capture) {
       super.openFileChooser(view, uploadFile, acceptType, capture);
   
       mFilePathCallback = uploadFile;
       Log.d("fchooser", "Opened file chooser.");
   }
   

   }

9. C'est fini. La charge de fichier devrait maintenant fonctionner. N'oubliez pas d'ajouter les permissions requises par Crosswalk à votre manifeste.

   utilise-permission android: name= " android.autorisation.ACCESS_FINE_LOCATION "
   
   uses-permission android:name="android.autorisation.ACCESS_NETWORK_STATE "
   
   uses-permission android:name="android.autorisation.ACCESS_WIFI_STATE "
   
   uses-permission android:name="android.autorisation.Caméra "
   
   uses-permission android:name="android.autorisation.INTERNET "
   
   uses-permission android:name="android.autorisation.MODIFIE_AUDIO_SETTINGS "
   
   uses-permission android:name="android.autorisation.RECORD_AUDIO "
   
   uses-permission android:name="android.autorisation.WAKE_LOCK "
   
   utilisation-permission android: name= " android.autorisation.WRITE_EXTERNAL_STORAGE "

Chooser fichier dans un webview fonctionne maintenant dans la dernière version D'Android 4.4.3.

a essayé moi-même en utilisant Nexus 5.

malgré le fait que la version Kitkat n'est pas compatible avec le champ webview type=file form,nous pourrions utiliser la méthode addJavascriptInterface de webview pour accomplir la tâche de téléchargement de fichier. Côté serveur devrait juger la version d'android, si elle est inférieure à 4.4 , utilisez WebViewChromeClient méthodes privées,si 4.4 ou plus, laissez le serveur appeler la méthode android pour communiquer entre eux(ex. télécharger le fichier contenu async)

/ / code

webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebViewJavaScriptInterface(this), "app");

Voici un lien qui pourrait vous aider...

appelez-android-méthodes-de-javascript

j'ai construit ma propre solution pour ce problème sans utiliser de bibliothèques, de plugins Cordova ou de WebViews personnalisés, et il fonctionne correctement dans toutes les versions Android.

cette solution implique l'utilisation d'un Javascript très simple pour communiquer entre votre site Web dans le WebView et L'application Android, et effectuer la sélection de fichiers et télécharger directement à partir de votre application Android, supprimer tous les openFileChooser(), showFileChooser() et onShowFileChooser () webchromeclient methods.

la première étape est de déclencher un message de console javascript du site Web lorsque l'utilisateur clique sur une entrée de fichier, écrire un code unique , qui sera utilisé pour télécharger le fichier avec un nom ou un chemin unique. Par exemple, en concaténant le datetime complet avec un nombre aléatoire énorme:

<input type="file" name="user_file" onclick="console.log('app.upload=20170405173025_456743538912');">

alors votre application peut lire ceci messages primordial WebChromeClient de onConsoleMessage() la méthode, de détecter ce message, lire le code, et déclencheur de sélection de fichier :

webview.setWebChromeClient(new WebChromeClient() {
    // Overriding this method you can read messages from JS console.
    public boolean onConsoleMessage(ConsoleMessage message){          
        String messageText = message.message();
        // Check if received message is a file upload and get the unique code
        if(messageText.length()>11 && messageText.substring(0,11).equals("app.upload=")) {
           String code = messageText.substring(11);
           triggerFileUploadSelection(code);
           return true;
        }
        return false;
    }
});

pour la sélection de fichier , vous pouvez simplement utiliser un simple Android ACTION_PICK intention comme ceci:

public void triggerFileUploadSelection(String code){
    // For Android 6.0+ you must check for permissions in runtime to read from external storage
    checkOrRequestReadPermission();

    // Store code received from Javascript to use it later (code could also be added to the intent as an extra)
    fileUploadCode = code;

    // Build a simple intent to pick any file, you can replace "*/*" for "image/*" to upload only images if needed
    Intent filePickerIntent = new Intent(Intent.ACTION_PICK);
    filePickerIntent.setType("*/*");

    // FILE_UPLOAD_CODE is just any unique integer request code to identify the activity result when the user selects the file
    startActivityForResult( Intent.createChooser(filePickerIntent, getString(R.string.chooseFileToUpload) ), FILE_UPLOAD_CODE );
}

après que l'Utilisateur a sélectionné un fichier (ou non), vous pouvez recevoir le fichier Uri , et traduisez - le vers un vrai chemin de fichier avec:

@Override
public void onActivityResult (int requestCode, int resultCode, Intent data) {
    if(requestCode==FILE_UPLOAD_CODE) {
        if(data != null && resultCode == RESULT_OK){
            // user selected a file
            try{
                Uri selectedFileUri = data.getData();
                if(selectedFileUri!=null) {
                    // convert file URI to a real file path with an auxiliary function (below)
                    String filePath = getPath(selectedFileUri);
                    if(filePath!=null) {
                        // I got the file path, I can upload the file to the server (I pass webview as an argument to be able to update it when upload is completed)
                        uploadSelectedFile(getApplicationContext(), filePath, fileUploadCode, webview);
                    }else{
                        showToastFileUploadError();
                    }
                }else{
                    showToastFileUploadError();
                }
            }catch (Exception e){
                e.printStackTrace();
                showToastFileUploadError();
            }
        }else{
            // user didn't select anything
        }
    }
}

// I used this method for images, and it uses MediaStore.Images so you should probably 
// use another method to get the path from the Uri if you are working with any kind of file
public String getPath(Uri uri) {
    String[] projection = { MediaStore.Images.Media.DATA };
    Cursor cursor = managedQuery(uri, projection, null, null, null);
    if(cursor==null)return null;
    int column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
    cursor.moveToFirst();
    return cursor.getString(column_index);
}

la méthode uploadSelectedFile, crée simplement un objet avec toutes les informations à l'intérieur (filePath, fileUploadCode, et WebView), et déclenche un AsyncTask qui télécharge le fichier en utilisant cette information, et met à jour le WebView quand c'est fait:

public static void uploadSelectedFile(Context c, String filePath, String code, WebView webView){
    // YOU CAN SHOW A SPINNER IN THE WEB VIEW EXECUTING ANY JAVASCRIPT YOU WANT LIKE THIS:
    webView.loadUrl("javascript: Element.show('my_upload_spinner');void 0"); 
    // void 0 avoids at the end avoids some browser redirection problems when executing javascript commands like this

    // CREATE A REQUEST OBJECT (you must also define this class with those three fields and a response field that we will use later):
    FileUploadRequest request = new FileUploadRequest(filePath, code, webView);

    // Trigger an async task to upload the file, and pass on the request object with all needed data
    FileUploadAsyncTask task = new FileUploadAsyncTask();
    task.execute(request);
}

l'AsyncTask reçoit l'objet request avec toutes les informations, et utilise Multipartutilité pour construire une requête multipartie et l'envoyer au serveur facilement. Vous pouvez obtenir beaucoup de Java multipart Utilities de nombreux endroits, l'un d'eux est ici: http://www.codejava.net/java-se/networking/upload-files-by-sending-multipart-request-programmatically

public class FileUploadAsyncTask extends AsyncTask<FileUploadRequest, Void, FileUploadRequest> {
    @Override
    protected FileUploadRequest doInBackground(FileUploadRequest... requests) {
        FileUploadRequest request = requests[0];

        try {
            // Generate a multipart request pointing to the URL where you will receive uploaded file
            MultipartUtility multipart = new MultipartUtility("http://www.example.com/file_upload.php", "UTF-8");
            // Add a field called file_code, to send the code to the server script
            multipart.addFormField("file_code", request.code);
            // Add the file to the request
            multipart.addFilePart("file_path", new File(request.filePath));

            // Send the request to the server and get the response and save it back in the request object
            request.response = multipart.finish(); // response from server.
        } catch (IOException e) {
            request.response = "FAILED";
            e.printStackTrace();
        }
        return request;
    }

maintenant nous avons téléchargé le fichier sur le serveur et nous pouvons mettre à jour notre site Web en utilisant Javascript à nouveau à partir de notre méthode onPostExecute dans notre AsyncTask. La chose la plus importante est de définir le code de fichier dans un champ caché dans votre formulaire , de sorte que vous pouvez obtenir ce code lorsque l'utilisateur envoie le formulaire. Vous pouvez également afficher un message dans le site ou même facilement afficher l'image téléchargée (si c'est une image):

@Override
protected void onPostExecute(FileUploadRequest request) {
    super.onPostExecute(request);

    // check for a response telling everything if upload was successful or failed
    if(request.response.equals("OK")){
        // set uploaded file code field in a hidden field in your site form (ESSENTIAL TO ASSOCIATE THE UPLOADED FILE WHEN THE USER SENDS THE WEBSITE FORM)
        request.webView.loadUrl("javascript: document.getElementById('app_upload_code_hidden').value = '"+request.code+"';void 0");

        // Hide spinner (optional)
        //request.webView.loadUrl("javascript: Element.hide('my_upload_spinner');void 0");

        // show a message in the website, or the uploaded image in an image tag setting the src attribute 
        // to the URL of the image you just uploaded to your server. 
        // (you must implement your own fullUrl method in your FileUploadRequest class)
        // request.webView.loadUrl("javascript: document.getElementById('app_uploaded_image').src = '"+request.fullUrl()+"';void 0");
        // request.webView.loadUrl("javascript: Element.show('app_uploaded_image');void 0");
    }
}

maintenant la partie Android est terminée, et vous avez besoin de travailler côté serveur pour recevoir le fichier vous téléchargez via L'application AsyncTask Android et de l'enregistrer où que vous besoin.

vous aurez également à traiter votre formulaire de site Web lorsque l'utilisateur l'envoie , et de faire tout ce dont vous avez besoin avec le fichier que l'utilisateur téléchargé à partir de l'application. Pour ce faire, vous obtiendrez le code de fichier dans le formulaire (nous l'avons rempli dans un champ dans onPostExecute ()), et vous devez utiliser ce code de fichier pour trouver le fichier que l'application a envoyé à votre serveur. Pour ce faire, vous pouvez sauvegarder le fichier dans un chemin en utilisant ce code comme nom du fichier, ou enregistrez le code et le chemin où vous avez téléchargé le fichier dans une base de données.

Cette solution ne repose que sur des éléments disponibles et compatibles avec toutes les versions Android, elle devrait donc fonctionner sur n'importe quel appareil (et je n'ai plus reçu de plaintes des utilisateurs à ce sujet).

si vous avez plusieurs entrées de fichier dans la même page, vous pouvez envoyer un numéro de champ ou un identificateur supplémentaire avec le code de fichier unique dans le message javascript initial, passez cet identifiant dans tout le code app, et utilisez-le pour mettre à jour les bons éléments dans onPostExecute().

j'ai modifié un peu le code actuel ici, donc si quelque chose échoue, ce sera probablement une faute de frappe ou un petit détail en renommant quelques choses.

il y a beaucoup d'information à traiter, alors si quelqu'un a besoin d'une clarification ou si vous avez des suggestions ou des corrections, veuillez me le dire.

le nouveau navigateur de fichier de Kitkat devient tout aussi fou sur Chrome, voir comment WebView utilise maintenant Chrome il pourrait être un problème connexe. J'ai trouvé que le téléchargement de fichiers directement à partir de la caméra fonctionne, mais pas à partir du dossier 'Images'. Si vous deviez télécharger à partir de 'Gallery' à la place, les mêmes fichiers sont accessibles. Gah.

semble comme un correctif est prêt mais en attente de libération:

https://code.google.com/p/chromium/issues/detail?id=278640

si vous allez juste ajouter un wrapper webview autour de votre site web et le lancer comme une application, juste ne regardez pas autour avec android webview par défaut, d'une façon ou d'une autre, il est un énorme mal de tête..pour moi les deux choses n'ont pas fonctionné 1. Fichier d'entrée 2. Stripe checkout integreration (qui utilise l'API advanced JS)

ce que j'ai fait pour sortir des ténèbres

vient de créer un exemple D'application utilisant Cordova. Il est beaucoup plus simple que nous le pensons.

1. installer Cordova à partir de sa page officielle, construire un exemple d'application.
2. Il vous donnera un fichier apk. ( Vous l'avez)

3. vous allez dans le dossier www À partir de l'application créée et ouvrez l'index.js, trouver et remplacer la ligne onDeviceReady: function () {window.ouvert (' http://yourdomain.com/yourpage ")} Exécuter l'application à nouveau, il ouvrira le site

4. maintenant le maître de l'étape. Jusqu'à présent, Cordova n'a utilisé qu'un webview modéré. Tout devrait changer un jour. Ajouter crosswalk plugin à votre application Cordova, il remplacera le webview lent avec une toute nouvelle vue Chrome à part entière https://crosswalk-project.org/documentation/cordova.html

5. exécuter cordova clean , puis cordova build --release nettoyer l'ancienne construction.

6. ouvrir la config.xml à l'intérieur l'intérieur du répertoire app donné par Cordva app et ajouter <allow-navigation href="http://yourdomain.com/*" />
7. relancez l'application. La magie!.

lorsque vous utilisez crosswalk-webview-21.51.546.7 et sélectionnez l'image via L'appareil photo. Dans onActivityResult() the intent.getData() est null . Cela signifie que le téléchargement d'image par caméra ne peut pas fonctionner.