この記事では主に、複数の Base64 形式の画像をサーバーにアップロードするための H5 モバイル開発 Ajax について詳しく紹介します。興味のある方は参考にしてください。
これ以上のナンセンスはありません。コードを見てください。コンポーネントをアップロード
<p class="imgbox">
<img class="goodsimg" src="../../assets/addimg.png">
<input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>
</p>
viewimg($event) {
//获取当前的input标签
var currentObj = event.currentTarget;
//找到要预览的图片img标签,亦可动态生成
var img = currentObj.parentNode.children[0];
setImagePreview(currentObj, img);
function setImagePreview(docObj, imgObjPreview) {
if (docObj.files && docObj.files[0]) {
imgObjPreview.style.display = 'block';
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
}
}
3. 画像を取得してサーバーにアップロードします
//单张图片上传 var inputs = $("input.fileupload"); for (var i = 0; i < inputs.length; i++) { //图片转base64上传 var file = inputs[i].files; if (file[0]) { var reader = new FileReader(); reader.readAsDataURL(file[0]); reader.onload = function(e) { var event = this; console.log(event.result); $.ajax({ type: 'POST', url: 'http://10.145.0.05/goods/addGoodsBase64', dataType: "json", data: { "base64": event.result, }, success: function(data) { console.log(data); } }); } } }
上記は私が編集したものです皆さん、今後皆さんのお役に立てれば幸いです。関連記事:jquery ajaxの二次カプセル化の方法(コード付き)
以上がH5 モバイル開発 Ajax は複数の Base64 形式の画像をサーバーにアップロードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。