web拍照上傳
㈠ 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
在eclipse上安裝好android開發環境,android調用webservice使用ksoap,本經驗使用的是ksoap2-android-assembly-2.6.4-jar-with-dependencies.jar
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
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
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
服務端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"上傳圖片失敗!";
}
操作步驟
(1)點擊「點擊啟動相機」按鈕,回到拍照模式下,拍照完成,回到初始界面,顯示剛拍的照片
(2)點擊「保存照片到伺服器」按鈕,通過webservice把照片保存到伺服器中,TextView顯示保存信息。
㈨ 方正高拍儀介面開發WEB上傳圖片到伺服器(.NET)
1、安裝插件程序【方正影像採集插件安裝包_I_v3.0.74.0.exe】
2、根據技術人員提供的HTMLdemo進行開發
增加攝像預覽控制項,客戶不需要預覽,因此我進行了隱藏
增加按鈕事件方法,另外由於初始攜嘩化需要一定的時間,技術人員說是3秒,因此辯鎮行我設置了一個等待3秒再執行拍攝的方法。最後得到圖像的Base64字元流傳至後台進行上傳到伺服器
commonServices.ashx 文件上傳圖旅咐片方法