当前位置:首页 » 文件管理 » 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 16:16:30 浏览:859
linux怎么编译内核 发布:2025-02-12 16:03:02 浏览:188
新的怎么注册微信账号密码忘了怎么办 发布:2025-02-12 15:50:08 浏览:658
android代码搜索 发布:2025-02-12 15:45:36 浏览:778
矢量图算法 发布:2025-02-12 15:43:53 浏览:192
python量化投资入门 发布:2025-02-12 15:34:17 浏览:174
苹果的天气跟安卓的天气哪个准 发布:2025-02-12 15:33:37 浏览:313
西安分布式存储咨询 发布:2025-02-12 15:33:24 浏览:179
我的世界服务器怎么获得32k乱码棒 发布:2025-02-12 15:25:15 浏览:545
hadoopftp 发布:2025-02-12 15:22:23 浏览:753