2. 程式人生 > >h5呼叫手機相簿攝像頭以及資料夾

h5呼叫手機相簿攝像頭以及資料夾

阿新 • • 發佈：2019-01-19

在之前一家公司的時候要做一個app裡面有上傳頭像的功能，當時研究了好久，找到了一篇文章關於h5攝像頭以及相簿的呼叫的，所以就解決了這個問題了！！我這裡記錄一下以便後面有人需要，可以參考一下！！！！

下面是完整的一個HTML頁面內容，放在伺服器上然後瀏覽就可以了，只支援Chrome和Safari核的瀏覽器，QQ瀏覽器，Chrome，Safari瀏覽器都可以。在不同的手機和瀏覽器上面展現的方式不一樣。

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <title>上傳圖片</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <iframe name="uploadfrm" id="uploadfrm" style="display: none;"></iframe>  
  9.     <form name="formHead" method="post" action="" id="formHead" enctype="multipart/form-data" target="uploadfrm">  
  10.         <div>  
  11.             <div>  
  12.                 <input type="file" name="file_head" id="file_head" onchange="javascript:setImagePreview();" />  
  13.             </div>  
  14.             <div>  
  15.                 <div id="DivUp" style="display: none">  
  16.                     <input type="submit" data-inline="true" id="BtnUp" value="確認上傳" data-mini="true" />  
  17.                 </div>  
  18.             </div>  
  19.         </div>  
  20.     </form>  
  21.     <div data-role="fieldcontain">  
  22.         <div id="localImag">  
  23.             <img id="preview" width="-1" height="-1" style="display: none" />  
  24.         </div>  
  25.     </div>  
  26.     <script type="text/javascript">  
  27.         function setImagePreview() {  
  28.             var preview, img_txt, localImag, file_head = document.getElementById("file_head"),  
  29.             picture = file_head.value;  
  30.             if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上傳的圖片格式不正確，請重新選擇！"),  
  31.             !1;  
  32.             if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",  
  33.                 preview.style.width = "63px",  
  34.                 preview.style.height = "63px",  
  35.                 preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);  
  36.             else {  
  37.                 file_head.select(),  
  38.                 file_head.blur(),  
  39.                 img_txt = document.selection.createRange().text,  
  40.                 localImag = document.getElementById("localImag"),  
  41.                 localImag.style.width = "63px",  
  42.                 localImag.style.height = "63px";  
  43.                 try {  
  44.                     localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",  
  45.                     localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt  
  46.                 } catch(f) {  
  47.                     return alert("您上傳的圖片格式不正確，請重新選擇！"),  
  48.                     !1  
  49.                 }  
  50.                 preview.style.display = "none",  
  51.                 document.selection.empty()  
  52.             }  
  53.             return document.getElementById("DivUp").style.display = "block",  
  54.             !0  
  55.         }  
  56.     </script>  
  57. </body>  
  58. </html> 

下面是幾個效果圖：

Chrome瀏覽器效果：

QQ瀏覽器效果：

拍照效果：

參考文獻：http://blog.csdn.net/jwzhangjie/article/details/40391537#comments

相關推薦

h5呼叫手機相簿攝像頭以及資料夾

在之前一家公司的時候要做一個app裡面有上傳頭像的功能，當時研究了好久，找到了一篇文章關於h5攝像頭以及相簿的呼叫的，所以就解決了這個問題了！！我這裡記錄一下以便後面有人需要，可以參考一下！！！！下面是完整的一個HTML頁面內容，放在伺服器上然後瀏覽就可以了，只支援Chrome和Safari核的瀏覽器，QQ瀏

H5呼叫手機攝像頭，圖片，視訊等

限制只能選擇圖片<input type="file" accept="image/*">限制只能選擇視訊<input type="file" accept="video/*">限

H5 呼叫手機攝像機、相簿功能

本文轉載於:猿2048網站H5 呼叫手機攝像機、相簿功能   <input type="file" accep

Java實現檔案以及資料夾的建立和刪除

  1，檔案建立 /** * 建立指定路徑檔案 * * @param filePath：指定路徑（包括檔名的絕對路徑） */ public static void createFile(String filePath) { File file = new File(

java按照目錄結構壓縮資料夾以及資料夾內內容

java按照目錄結構壓縮資料夾以及資料夾內內容 1 package com.basis.utils; 2 3 import java.io.BufferedInputStream; 4 import java.io.BufferedOutputStream; 5 import

Linux下用ls和du命令檢視檔案以及資料夾大小 (轉載)

ls的用法 ls -l |grep "^-"|wc -l或find ./company -type f | wc -l  檢視某資料夾下檔案的個數，包括子資料夾裡的。 ls -lR|grep "^-"|wc -l   檢視某資料夾下資料夾的個數，包括子資料夾裡的

不需要進控制器就訪問的檔案以及資料夾

RewriteEngine on 過濾  可以 不進控制器訪問的字尾名以及資料夾 RewriteCond $1 !^((.*).php|(.*).rar|(.*).zip|(.*).js|(.*).txt|(.*).csv|ct|f|phpmyadmin|test|mp|templat

android開發 19 呼叫手機的攝像頭錄影，並播放

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

H5 呼叫 手機軟體的功能

1、呼叫 郵件 ： 參考 https://blog.csdn.net/github_38516987/article/details/77637546 （親測有效） <a href="mailto:[email protected]">傳送郵件<

工作專案看門狗(記錄專案檔案以及資料夾的改動)

  #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/9/18 18:06 # @Author : qhh # @Site : # @File : pywatchdog.py

呼叫手機相簿

設定info ap.h裡面 // // AppDelegate.h // JHH-呼叫相機相簿 // // Created by 賈歡 on 2018/5/24. // Copyright © 2018年 jiahuan. All rights reserved. //

顯示當前目錄下檔案以及資料夾的GUI

跟著《Python 核心程式設計》照著做了一個能夠顯示當前目錄的GUI小工具。 底層是呼叫的python的OS包 1 from tkinter import * 2 import os 3 from time import sleep 4 5 class Dir

Go實戰--golang中檔案以及資料夾路徑相關操作

生命不止，繼續 go go go!!! 之前介紹過golang的標準庫：path/filepath, os 今天就跟大家分享幾個關於檔案以及資料夾的相關操作。 獲取目錄中所有檔案 使用包： io/ioutil 使用方法： ioutil.Re

遞迴實現任意目錄，列出檔案以及資料夾

import java.io.File; import java.util.List; import java.util.Vector; /** * @author QSJ * @date 2018-03-11 * @describe 遞迴實現輸入任意目錄，列出檔案以及資料夾 */ pub

搭建springBoot環境以及解決Eclipse中建立maven專案時專案報錯以及資料夾resource報錯問題

maven專案時專案報錯以及資料夾resource報錯問題 因為這段時間公司再用springBoot，於是我就學習了springBoot，在這過程中遇到了很多問題，最後終於都解決了，現在為自己的學習做一下總結，同時簡單的搭建一個maven環境下的springBoot專案，供類似於我這種新

Linux下用ls和du命令檢視檔案以及資料夾大小

ls -l |grep "^-"|wc -l或find ./company -type f | wc -l  檢視某資料夾下檔案的個數，包括子資料夾裡的。 ls -lR|grep "^-"|wc -l   檢視某資料夾下資料夾的個數，包括子資料夾裡的。 ls -lR|grep "^d"|wc -l  說明：

vc中刪除資料夾以及資料夾中的內容的三種方法

BOOL CDeleteFolderDlg::DeleteFolder(CString lpszPath)//刪除資料夾以及資料夾內的檔案 { CHAR szFromPath[_MAX_PATH];//原始檔路徑memcpy(szFromPath, lpszPath, lp

HTML5+呼叫手機相簿，轉碼為base64並替換元素背景圖

HTML5+ 呼叫手機相簿圖片，轉化為bas64編碼上傳並顯示。 這個方法存在一個弊端： 圖片轉碼為Base64格式時間長，上傳時間長，如果使用者在base64編碼轉換完成前，點選提交按鈕，會導致沒有上傳或者上傳有誤。 故，不建議使用。更好的方式是使用檔案上傳，見另一篇文章

每日學點python之十(檔案以及資料夾操作)

open() 方法 Python open() 方法用於開啟一個檔案，並返回檔案物件，在對檔案進行處理過程都需要使用到這個函式，如果該檔案無法被開啟，會丟擲 OSError。 注意：使用 open() 方法一定要保證關閉檔案物件，即呼叫 close() 方法。 open() 函式常用

python針對記事本操作以及資料夾操作

#-*-coding:utf-8-*-'''建立記事本，編寫內容，檢視內容，格式化筆記本，備份與恢復本地記事本，日誌內容過濾write()函式writelines()函式os 函式copyfile()和move()函式replace()函式 替換字串mkdir()函式 建立檔案目錄makedir