當前位置:首頁 » 文件管理 » web拍照上傳

web拍照上傳

發布時間: 2023-05-11 17:11:10

㈠ HTML5 做的移動 web app 怎樣實現從本地上傳圖片

當然可以,不過只能從相冊里傳

㈡ web前端上傳圖片的幾種方法

下面給你介紹3種web前端上傳圖片的方法:

1.表單上傳

最傳統的圖片上傳方式是form表單上傳,使用form表單的input[type=」file」]控制項,打開系統的文件選擇對話框,從而達到選擇文件並上傳的目的。

ajax無刷新上傳

Ajax無刷新上傳的方式,本質上與表單上傳無異,只是把表單里的內容提出來採用ajax提交,並且由前端決定請求結果回傳後的展示結果。

3.各類插件上傳

當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等,這時傳統的表單上傳很難實現這些功能,我們可以藉助現有插件完成。

如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等,大家可根據項目實際需求選擇適合的插件。

㈢ 您好,我想請問一下,如何在web中增加上傳照片的功能jsp的,謝謝!

用jquery在頁面上傳圖,然後把存放的地址返回到servlet去,存放資料庫裡面去

㈣ 網頁調用攝像頭拍照改成上傳本地圖片

網頁調用攝像頭,很多瀏覽器不支持的。思路是:調用攝像頭拍照後,獲取到圖片的地址,或者文件二進制內容,非同步傳輸到伺服器。上傳也有兩種方法吧,一種是用H5的file類型input標簽,通過表單傳的。一種是通過js把文件轉成base64編碼格式傳輸的。

㈤ .net Web網頁中怎樣上傳圖片

前台代碼:

<div class="mflLeft">
<div class="mflLeft_FileUpload">
<asp:FileUpload ID="mflFileUpload"
runat="server" BorderColor="#6666FF" Width="150px" />
<asp:Button ID="btnUpload" runat="server" Text="點擊上傳" OnClick="btnUpload_Click" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<asp:Image ID="Image1" runat="server" />
</div>
</div>

後台代碼:

protected void btnUpload_Click(object sender, EventArgs e)
{
if (mflFileUpload.HasFile)
{
int a = Convert.ToInt32(ConfigurationManager.AppSettings["maxRequestLength"]);
if (mflFileUpload.PostedFile.ContentLength <= Convert.ToInt32(ConfigurationManager.AppSettings["maxRequestLength"]))
{
string extensionName = Path.GetExtension(mflFileUpload.FileName);
if (CheckFileType(extensionName))
{
Random r = new Random();
string fileName = DateTime.Now.ToString("yyyyMMddHHmmssms") + r.Next(1, 9999) + extensionName;
string filePath = ConfigurationManager.AppSettings["fileUpPath"] + fileName;//圖片上傳路徑
mflFileUpload.SaveAs(Server.MapPath(filePath));//保存上傳的圖片
Image1.ImageUrl = ConfigurationManager.AppSettings["fileUpPath"] + fileName;//顯示上傳的圖片
this.Label1.Text = "文件上傳成功!";
}
else {
Response.Write("<script type='text/javascript'>alert('文件格式不正確!')</script>");
return;
}
}
else {
Response.Write("<script type='text/javascript'>alert('文件大小不能超過4M!')</script>");
return;
}
}
}
protected bool CheckFileType(string fileName)
{
switch (fileName)
{
case ".gif":
return true;
case ".png":
return true;
case ".jpg":
return true;
case ".jpeg":
return true;
default:
return false;
}
}

㈥ web端圖片上傳無法選擇圖片問題

直接打開硬碟看不到確定存在的目錄,那可能是那個目錄是個隱藏目錄,或是受保護的系統目錄。可以在資源管理器的 工具 菜單下打開文件夾選項,在打開的選項卡中點查看,在下面的 隱藏的文件和文件夾 下 選顯示所有文件和文件夾,再點確定。再去打開硬碟應該就可以找到那個目錄了。再右鍵點目錄,在屬性中取消隱藏屬性。

如果還是不能上傳圖片,要看下上傳是不是有限定,比如圖片尺寸,大小,擴展名是否在要求范圍內。

㈦ 如何使用HTML5實現利用攝像頭拍照上傳功能

HTML5技術支持WebApp在手機上拍照,顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能,當然你也可以在其它類型應用中適當使用此技術。
1、 視頻流
HTML5 的 The Media Capture(媒體捕捉) API 提供了對攝像頭的可編程訪問,用戶可以直接用 getUserMedia(請注意目前僅Chrome和Opera支持)獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽,並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
var video_element=document.getElementById(『video』);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時,video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是採用HTML5的Canvas功能,實時捕獲Video標簽的內容,因為Video元素可以作為Canvas圖像的輸入,所以這一點很好實現。主要代碼如下:

var canvas=document.createElement(『canvas』); //動態創建畫布對象
var ctx=canvas.getContext(』2d』);
var cw=vw,ch=vh;
ctx.fillStyle=」#ffffff」;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪制到畫布上指定的區域,可進行不等大不等位的繪制。
document.body.append(canvas);

3、 圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像,類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);

這樣,imgData變數就存儲了一長串的字元數據內容,表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分,所以要讓實際伺服器接收的圖像數據應該是這部分,我們可以用兩種辦法來獲取。
第一種:是在前端截取22位以後的字元串作為圖像數據,例如:
var data=imgData.substr(22);

如果要在上傳前獲取圖片的大小,可以使用:
var length=atob(data).length; //atob 可解碼用base-64解碼的字串

第二種:是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串(也就是在前台略過上面這步直接上傳)。例如php里:
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);

4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用:
$.post(『upload.php』,{『data』:data});

在後台我們用PHP腳本接收數據並存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,』w');
fwrite($fp,$image);
fclose($fp);
}

以上的解決方案不僅能用於Web App拍照上傳,也可以通過Canvas的編輯功能函數提供圖片編輯,例如裁剪、上色、塗鴉、圈點等功能,然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下,Web App與Native App之間的距離將越來越小。在可預見的不遠的未來,越來越多老的和新的開發項目必將會遷移到WEB應用上來。
相關規范:
(為便於閱讀,對原文進行了不失原意的適當修改,包括代碼中一些錯誤的重復,並作了注釋)
HTML5技術支持WebApp在手機上拍照,顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能,當然你也可以在其它類型應用中適當使用此技術。
1、 視頻流
HTML5 的 The Media Capture(媒體捕捉) API 提供了對攝像頭的可編程訪問,用戶可以直接用 getUserMedia(請注意目前僅Chrome和Opera支持)獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽,並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
var video_element=document.getElementById(『video』);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時,video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是採用HTML5的Canvas功能,實時捕獲Video標簽的內容,因為Video元素可以作為Canvas圖像的輸入,所以這一點很好實現。主要代碼如下:

var canvas=document.createElement(『canvas』); //動態創建畫布對象
var ctx=canvas.getContext(』2d』);
var cw=vw,ch=vh;
ctx.fillStyle=」#ffffff」;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪制到畫布上指定的區域,可進行不等大不等位的繪制。
document.body.append(canvas);

3、 圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像,類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);

這樣,imgData變數就存儲了一長串的字元數據內容,表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分,所以要讓實際伺服器接收的圖像數據應該是這部分,我們可以用兩種辦法來獲取。
第一種:是在前端截取22位以後的字元串作為圖像數據,例如:
var data=imgData.substr(22);

如果要在上傳前獲取圖片的大小,可以使用:
var length=atob(data).length; //atob 可解碼用base-64解碼的字串

第二種:是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串(也就是在前台略過上面這步直接上傳)。例如PHP里:
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);

4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用:
$.post(『upload.php』,{『data』:data});

在後台我們用PHP腳本接收數據並存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,』w');
fwrite($fp,$image);
fclose($fp);
}

以上的解決方案不僅能用於Web App拍照上傳,也可以通過Canvas的編輯功能函數提供圖片編輯,例如裁剪、上色、塗鴉、圈點等功能,然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下,Web App與Native App之間的距離將越來越小。在可預見的不遠的未來,越來越多老的和新的開發項目必將會遷移到WEB應用上來。

㈧ android拍照+文字上傳到.net或webservice怎麼做

方法/步驟
  1. 1

    在eclipse上安裝好android開發環境,android調用webservice使用ksoap,本經驗使用的是ksoap2-android-assembly-2.6.4-jar-with-dependencies.jar

  2. 2

    AndroidManifest.xml中需添加相應的許可權,例子:

    <?xmlversion="1.0"encoding="utf-8"?>

    <manifestxmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.camera"

    android:versionCode="1"

    android:versionName="1.0">

    <uses-sdk

    android:minSdkVersion="8"

    android:targetSdkVersion="9"/>

    <uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

    <uses-permissionandroid:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>

    <uses-permissionandroid:name="android.permission.INTERNET"/>

    <application

    android:allowBackup="true"

    android:icon="@drawable/ic_launcher"

    android:label="@string/app_name"

    android:theme="@style/AppTheme">

    <activity

    android:name="com.example.camera.MainActivity"

    android:label="@string/app_name">

    <intent-filter>

    <actionandroid:name="android.intent.action.MAIN"/>

    <categoryandroid:name="android.intent.category.LAUNCHER"/>

    </intent-filter>

    </activity>

    </application>

    </manifest>

  3. 3

    activity_main.xml文件代碼

    <?xmlversion="1.0"encoding="utf-8"?>

    <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical">

    <Button

    android:id="@+id/button"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="點擊啟動相機"/>

    <Button

    android:id="@+id/savePic"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="保存圖片到伺服器"/>

    <TextView

    android:id="@+id/textView"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"/>

    <ImageView

    android:id="@+id/imageView"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#999999"/>

    </LinearLayout>

  4. 4

    MainActivity具體代碼

    packagecom.example.camera;

    importjava.io.ByteArrayOutputStream;

    importjava.io.File;

    importjava.io.FileInputStream;

    importjava.io.FileNotFoundException;

    importjava.io.FileOutputStream;

    importjava.io.IOException;

    importorg.kobjects.base64.Base64;

    importorg.ksoap2.SoapEnvelope;

    importorg.ksoap2.serialization.SoapObject;

    importorg.ksoap2.serialization.SoapSerializationEnvelope;

    importorg.ksoap2.transport.HttpTransportSE;

    importandroid.app.Activity;

    importandroid.content.Intent;

    importandroid.graphics.Bitmap;

    importandroid.os.Bundle;

    importandroid.os.Environment;

    importandroid.provider.MediaStore;

    importandroid.util.Log;

    importandroid.view.View;

    importandroid.view.View.OnClickListener;

    importandroid.widget.Button;

    importandroid.widget.ImageView;

    importandroid.widget.TextView;

    {

    TextViewtv=null;

    StringfileName="/sdcard/myImage/my.jpg";//圖片保存sd地址

    Stringnamespace="http://webservice.service.com";//命名空間

    Stringurl="http://192.168.200.19:8080/Web/webservices/Portal";//對應的url

    StringmethodName="uploadImage";//webservice方法

    @Override

    publicvoidonCreate(BundlesavedInstanceState){

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    tv=(TextView)findViewById(R.id.textView);

    //啟用相機按鈕

    Buttonbutton=(Button)findViewById(R.id.button);

    button.setOnClickListener(newOnClickListener(){

    @Override

    publicvoidonClick(Viewv){

    Intentintent=newIntent(MediaStore.ACTION_IMAGE_CAPTURE);

    startActivityForResult(intent,1);

    }

    });

    //保存圖片到伺服器按鈕(通過webservice實現)

    ButtonsaveButton=(Button)findViewById(R.id.savePic);

    saveButton.setOnClickListener(newOnClickListener(){

    @Override

    publicvoidonClick(Viewv){

    testUpload();

    }

    });

    }

    /**

    *拍照完成後,回掉的方法

    */

    @Override

    protectedvoidonActivityResult(intrequestCode,intresultCode,Intentdata){

    super.onActivityResult(requestCode,resultCode,data);

    if(resultCode==Activity.RESULT_OK){

    StringsdStatus=Environment.getExternalStorageState();

    if(!sdStatus.equals(Environment.MEDIA_MOUNTED)){//檢測sd是否可用

    Log.v("TestFile",

    "SDcardisnotavaiable/writeablerightnow.");

    return;

    }

    Bundlebundle=data.getExtras();

    Bitmapbitmap=(Bitmap)bundle.get("data");//獲取相機返回的數據,並轉換為Bitmap圖片格式

    FileOutputStreamb=null;

    Filefile=newFile("/sdcard/myImage/");

    file.mkdirs();//創建文件夾

    try{

    b=newFileOutputStream(fileName);

    bitmap.compress(Bitmap.CompressFormat.JPEG,100,b);//把數據寫入文件

    }catch(FileNotFoundExceptione){

    e.printStackTrace();

    }finally{

    try{

    b.flush();

    b.close();

    }catch(IOExceptione){

    e.printStackTrace();

    }

    }

    ((ImageView)findViewById(R.id.imageView)).setImageBitmap(bitmap);//將圖片顯示在ImageView里

    }

    }

    /**

    *圖片上傳方法

    *

    *1.把圖片信息通過Base64轉換成字元串

    *2.調用connectWebService方法實現上傳

    */

    privatevoidtestUpload(){

    try{

    FileInputStreamfis=newFileInputStream(fileName);

    ByteArrayOutputStreambaos=newByteArrayOutputStream();

    byte[]buffer=newbyte[1024];

    intcount=0;

    while((count=fis.read(buffer))>=0){

    baos.write(buffer,0,count);

    }

    StringuploadBuffer=newString(Base64.encode(baos.toByteArray()));//進行Base64編碼

    connectWebService(uploadBuffer);

    Log.i("connectWebService","start");

    fis.close();

    }catch(Exceptione){

    e.printStackTrace();

    }

    }

    /**

    *通過webservice實現圖片上傳

    *

    *@paramimageBuffer

    */

    privatevoidconnectWebService(StringimageBuffer){

    //以下就是調用過程了,不明白的話請看相關webservice文檔

    SoapObjectsoapObject=newSoapObject(namespace,methodName);

    soapObject.addProperty("filename","my.jpg");//參數1圖片名

    soapObject.addProperty("image",imageBuffer);//參數2圖片字元串

    =newSoapSerializationEnvelope(

    SoapEnvelope.VER11);

    envelope.dotNet=false;

    envelope.setOutputSoapObject(soapObject);

    =newHttpTransportSE(url);

    try{

    httpTranstation.call(namespace,envelope);

    Objectresult=envelope.getResponse();

    Log.i("connectWebService",result.toString());

    tv.setText(result.toString());

    }catch(Exceptione){

    e.printStackTrace();

    tv.setText(e.getStackTrace().toString());

    }

    }

    }

  5. 5

    服務端webservice方法(cxf)

    publicStringuploadImage(Stringfilename,Stringimage){

    FileOutputStreamfos=null;

    try{

    StringtoDir="D:\work\image";//存儲路徑

    byte[]buffer=newBASE64Decoder().decodeBuffer(image);//對android傳過來的圖片字元串進行解碼

    FiledestDir=newFile(toDir);

    if(!destDir.exists()){

    destDir.mkdir();

    }

    fos=newFileOutputStream(newFile(destDir,filename));//保存圖片

    fos.write(buffer);

    fos.flush();

    fos.close();

    return"上傳圖片成功!"+"圖片路徑為:"+toDir;

    }catch(Exceptione){

    e.printStackTrace();

    }

    return"上傳圖片失敗!";

    }


  6. 操作步驟

    (1)點擊「點擊啟動相機」按鈕,回到拍照模式下,拍照完成,回到初始界面,顯示剛拍的照片

    (2)點擊「保存照片到伺服器」按鈕,通過webservice把照片保存到伺服器中,TextView顯示保存信息。

㈨ 方正高拍儀介面開發WEB上傳圖片到伺服器(.NET)

1、安裝插件程序【方正影像採集插件安裝包_I_v3.0.74.0.exe】
2、根據技術人員提供的HTMLdemo進行開發

增加攝像預覽控制項,客戶不需要預覽,因此我進行了隱藏

增加按鈕事件方法,另外由於初始攜嘩化需要一定的時間,技術人員說是3秒,因此辯鎮行我設置了一個等待3秒再執行拍攝的方法。最後得到圖像的Base64字元流傳至後台進行上傳到伺服器

commonServices.ashx 文件上傳圖旅咐片方法

熱點內容
銳志哪個配置性價比最高 發布:2025-02-12 17:38:43 瀏覽:918
智能推送演算法 發布:2025-02-12 17:38:41 瀏覽:835
拍照上傳器 發布:2025-02-12 17:34:29 瀏覽:652
androidweb框架 發布:2025-02-12 17:32:45 瀏覽:76
安卓編程賀卡 發布:2025-02-12 17:32:44 瀏覽:838
php獲取資料庫的欄位 發布:2025-02-12 17:29:02 瀏覽:766
伺服器地址消失 發布:2025-02-12 17:23:36 瀏覽:951
後台執行php腳本 發布:2025-02-12 17:21:45 瀏覽:471
spring編程式事務 發布:2025-02-12 17:16:55 瀏覽:398
nginx禁止ip訪問 發布:2025-02-12 17:15:14 瀏覽:273