WeChat WEUI 経由で画像をアップロードする方法、バックグラウンド PHP で画像を処理する方法は?
質問: WeChat WEUI を通じて画像をアップロードする方法、バックグラウンド PHP はそれをどのように処理すべきですか?
1. 現在発生している問題は、アプリケーションの weui 画像アップロード フレームワークですが、コード内のプレビュー部分 li は blob 型の画像を取得します。ただし、ajax を介して php に送信された入力は 1 つだけであり、取得できるのは最後の画像のみです。
<p class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles" >
<li class="weui-uploader__file" style="background-image:url('/Public/Admin/images/pic_160.png')"></li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('/Public/Admin/images/pic_160.png')">
<p class="weui-uploader__file-content">50%</p>
</li>
</ul>
<p class="weui-uploader__input-box">
<input id="uploaderInput" name="photo" class="weui-uploader__input" type="file" accept="image/*" />
</p>
</p>2. バックグラウンドで $_FILES を通じて取得できる入力は 1 つだけです。どうすればすべて入手できますか? weui を使用して写真をアップロードするにはどうすればよいですか?
[] を追加せずに写真を貼り付けると、
[] を追加すると、返される内容は次のようになります:
ソリューション
//解决思路如下: 通过改写他的文件隐藏域，每次选择一个图片之后，自动隐藏当前file，然后通过js插入一个新的空文件 type=“file”,这样就可以实现多文件上传。改写代码如下：
$(function(){
var tmpl = '<li id="#imgname#_li" class="weui-uploader__file" style="background-image:url(#url#)"></li>',
$gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles")
;
//此处的on 需要改成 live ,因为jquery插入html，js事件会失效，采用live
$uploaderInput.live("change", function(e){
var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
if (url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
var src_split = src.split('/');
$uploaderFiles.append($(tmpl.replace('#url#', src).replace('#imgname#', src_split[src_split.length-1])));
//其中img_str 为我自己写的隐藏文本框，用来存放所有的图片名称组成的字符,类似"'名称1','名称2'，'名称3'"，因为我用这个隐藏框的值，来删除页面页面的指定图片。
if($("#img_str").val() == '' || $("#img_str").val() == null){
$("#img_str").val("'"+src_split[src_split.length-1]+"'");
}else{
$("#img_str").val($("#img_str").val()+",'"+src_split[src_split.length-1]+"'");
}
//开启隐藏上传 p
$(this).after('<input id="uploaderInput" name="result_file[]" class="weui-uploader__input" type="file" accept="image/*" multiple/>');
$(this).hide();
$(this).attr({id:""+src_split[src_split.length-1]+"_input"});
}
});
$uploaderFiles.on("click", "li", function(){
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
$gallery.on("click", function(){
$gallery.fadeOut(100);
});
//删除图片 删除图片的代码也贴出来。
$(".weui-gallery__del").click(function(){
var imgback = $(this).parent("p").prev().attr("style");
var imgback_array= imgback.split(')');
imgback_array= imgback_array[0].split('/');
$("#"+imgback_array[imgback_array.length-1]+"_input").remove();
$("#"+imgback_array[imgback_array.length-1]+"_li").remove();
var img_str = $("#img_str").val().split(',');
var img_str_new = '';
for(var i=0;i<img_str.length;i++){
if(img_str[i] != "'"+imgback_array[imgback_array.length-1]+"'"){
if(img_str_new == ''){
img_str_new = img_str[i];
}else{
img_str_new = img_str_new+","+img_str[i];
}
}
}
$("#img_str").val(img_str_new);
});
});
/**
后台获取数打印出来 如下 包含3张图片
**/
array (size=2)
'error' =>
array (size=0)
empty
'files' =>
array (size=3)
0 =>
array (size=14)
'file_name' => string 'e2dafa6a5f06dc34004607e1f00a4824.jpg' (length=36)
'file_type' => string 'image/jpeg' (length=10)
'file_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/' (length=64)
'full_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/e2dafa6a5f06dc34004607e1f00a4824.jpg' (length=100)
'raw_name' => string 'e2dafa6a5f06dc34004607e1f00a4824' (length=32)
'orig_name' => string '-0.jpg' (length=6)
'client_name' => string '6880_jpg_wh300.jpg' (length=18)
'file_ext' => string '.jpg' (length=4)
'file_size' => float 93.32
'is_image' => boolean true
'image_width' => int 960
'image_height' => int 300
'image_type' => string 'jpeg' (length=4)
'image_size_str' => string 'width="960" height="300"' (length=24)
1 =>
array (size=14)
'file_name' => string 'ba7a0cc5930d19c6b1abfd795b3eb4d3.jpg' (length=36)
'file_type' => string 'image/jpeg' (length=10)
'file_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/' (length=64)
'full_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/ba7a0cc5930d19c6b1abfd795b3eb4d3.jpg' (length=100)
'raw_name' => string 'ba7a0cc5930d19c6b1abfd795b3eb4d3' (length=32)
'orig_name' => string '-1.jpg' (length=6)
'client_name' => string '4856_jpg_wh300.jpg' (length=18)
'file_ext' => string '.jpg' (length=4)
'file_size' => float 92.95
'is_image' => boolean true
'image_width' => int 1190
'image_height' => int 300
'image_type' => string 'jpeg' (length=4)
'image_size_str' => string 'width="1190" height="300"' (length=25)
2 =>
array (size=14)
'file_name' => string 'fc0e75063c34f102a3a67fd17aa54a18.jpg' (length=36)
'file_type' => string 'image/jpeg' (length=10)
'file_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/' (length=64)
'full_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/fc0e75063c34f102a3a67fd17aa54a18.jpg' (length=100)
'raw_name' => string 'fc0e75063c34f102a3a67fd17aa54a18' (length=32)
'orig_name' => string '-2.jpg' (length=6)
'client_name' => string '4873_jpg_wh300.jpg' (length=18)
'file_ext' => string '.jpg' (length=4)
'file_size' => float 214.92
'is_image' => boolean true
'image_width' => int 1152
'image_height' => int 300
'image_type' => string 'jpeg' (length=4)
'image_size_str' => string 'width="1152" height="300"' (length=25)関連記事:
Angularjs が WeChat を統合UI (weui)
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7696
15
1640
14
1393
52
1287
25
1229
29
WeChatアプレットは画像アップロード機能を実装
Nov 21, 2023 am 09:08 AM
WeChat アプレットが画像アップロード機能を実装 モバイル インターネットの発展に伴い、WeChat アプレットは人々の生活に欠かせないものになりました。 WeChat ミニ プログラムは、豊富なアプリケーション シナリオを提供するだけでなく、画像アップロード機能などの開発者定義の機能もサポートします。この記事では、WeChat アプレットに画像アップロード機能を実装する方法と具体的なコード例を紹介します。 1. 準備作業 コードを書き始める前に、WeChat 開発者ツールをダウンロードしてインストールし、WeChat 開発者として登録する必要があります。同時に、WeChat についても理解する必要があります。
CakePHP フレームワークを使用して画像のアップロードと表示を実装する手順
Jul 29, 2023 pm 04:21 PM
CakePHP フレームワークを使用して画像のアップロードと表示を実装する手順 はじめに: 最新の Web アプリケーションでは、画像のアップロードと表示は一般的な機能要件です。 CakePHP フレームワークは、開発者に強力な機能と便利なツールを提供し、画像のアップロードと表示を簡単かつ効率的にします。この記事では、CakePHP フレームワークを使用して画像をアップロードして表示する方法を紹介します。ステップ 1: ファイル アップロード フォームを作成する まず、ユーザーが画像をアップロードするためのフォームをビュー ファイルに作成する必要があります。以下はその例です
Vue テクノロジー開発における画像のアップロードと圧縮の処理方法
Oct 08, 2023 am 10:58 AM
Vue テクノロジ開発で画像のアップロードと圧縮を処理する方法 最新の Web アプリケーションでは、画像のアップロードは非常に一般的な要件です。ただし、ネットワーク送信とストレージの理由により、オリジナルの高解像度画像を直接アップロードすると、アップロード速度が遅くなり、ストレージ容量が大量に無駄になる可能性があります。したがって、画像のアップロードと圧縮は非常に重要です。 Vue テクノロジー開発では、いくつかの既製のソリューションを使用して画像のアップロードと圧縮を処理できます。 vue-upload-comoneの使い方を紹介します。
PHPとVueを使って画像アップロード機能を実装する方法
Sep 25, 2023 pm 03:17 PM
PHP と Vue を使用して画像アップロード機能を実装する方法 現在の Web 開発では、画像アップロード機能は非常に一般的な要件です。この記事では、PHPとVueを使って画像アップロード機能を実装する方法と、具体的なコード例を詳しく紹介します。 1.フロントエンド部分（Vue） まずフロントエンドで画像をアップロードするためのフォームを作成する必要があります。具体的なコードは次のとおりです:<template><div><inputtype="fil
ThinkPHP6 を使用して画像をアップロードする方法
Jun 20, 2023 pm 09:25 PM
インターネットの発展に伴い、画像のアップロードは Web サイトやアプリケーションの開発に不可欠な機能になりました。 PHP の分野では、ThinkPHP6 は非常に人気のある開発フレームワークになっています。この記事では、ThinkPHP6を使用して画像アップロードを実装する方法を紹介します。 1. プロジェクトとコントローラーを作成する まず、新しい ThinkPHP6 プロジェクトを作成する必要があります。 Composer を使用してインストールすることも、公式 Web サイトから最新バージョンをダウンロードすることもできます。インストールが完了したら、コンソールに次のように入力します
Vue テクノロジー開発で画像のアップロードとトリミングを実装する方法
Oct 10, 2023 pm 12:46 PM
Vue テクノロジ開発で画像のアップロードとトリミングを実装する方法には、特定のコード サンプルが必要です。最新の Web 開発では、画像のアップロードと画像のトリミングは一般的な要件の 1 つです。人気のあるフロントエンド フレームワークとして、Vue.js はこれらの機能の実現に役立つ豊富なツールとプラグインを提供します。この記事では、Vue テクノロジー開発で画像のアップロードとトリミングを実装する方法を紹介し、具体的なコード例を示します。画像アップロードの実装は、画像の選択と画像のアップロードの 2 つのステップに分けることができます。 Vue では、サードパーティのプラグインを使用してこれを簡素化できます。
PHP を使用して簡単なオンライン画像アップロードおよび表示システムを実装する方法
Sep 25, 2023 am 09:21 AM
PHP を使用して簡単なオンライン画像アップロードおよび表示システムを実装する方法. 画像アップロードおよび表示システムは、現代の Web サイトでよく使用される機能の 1 つです. この機能は、開発プロセス中に PHP を使用して迅速に実装できます。この記事では、PHP を使用して簡単なオンライン画像のアップロードおよび表示システムを作成する方法を紹介し、具体的なコード例を示します。 1. データベースとテーブルの作成 まず、アップロードされた画像情報を保存するデータベースとテーブルを作成する必要があります。次の SQL ステートメントを使用して、「images」という名前のテーブルを作成し、
Vue開発における画像アップロードプレビューのモーダルボックス表示の問題を解決する方法
Jul 01, 2023 pm 01:13 PM
Vue 開発で画像アップロードのプレビュー モーダル ボックスが表示される問題を解決する方法 Vue 開発では、画像をアップロードしてプレビューする必要がよく発生します。この場合、よくある質問は、画像をアップロードした後、モーダル ボックスにプレビュー画像を表示する方法です。この記事では、この問題を解決する方法を紹介します。まず、ファイル アップロード入力要素を Vue コンポーネントに追加して、アップロードする画像ファイルを選択する必要があります。ファイルアップロードの変更イベントをリッスンすることで、ユーザーが選択した画像を取得できます
