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 文件上传图旅咐片方法