html实现上传

Ⅰ 如何使用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应用上来。

Ⅱ 如何成功上传HTML文件

HTML中使用input type="file"上传文件时，代码中只能得到文件的名称，而有些特殊的需要要求得到上传文件的绝对路径，为此采用javascript实现得到文件的绝对路径。
<form name="thisform" method="post"
action="<%=request.getContextPath()%>/movieManage.do" id="thisform" enctype="multipart/form-data">

<input type="file" name="theFile" onchange="document.getElementById('theFilePath').value=this.value"/>

<input type="hidden" id="theFilePath" name="theFilePath" value="">

</form>

注意：要有enctype="multipart/form-data"

Action代码：
String filePath = request.getParameter("theFilePath");

filePath既是上传文件的绝对路径。

浏览器中测试：
Firefox和IE中可以得到绝对路径。

Ⅲ 在html页面里面制作一个上传图片的区域，就是点那个区域，就能上传照片，这个html代码应该怎么写

你好，html上传文件的代码如下：

<inputtype="file"name="fileUpload"/>
<inputtype="submit"value="上传文件"/>

至于你要说的有个区域显示图片的，这个需要配合前端开发才可以，单纯的html代码是做不到的，谢谢。

Ⅳ html中怎么上传文件代码

在HTML标准中，XMLHttpRequest对象被重新定义，被称为“XMLHttpRequest Level 2”，其中包含了以下5个新特性：

1、支持上传、下载字节流，比如文件、blob以及表单数据。

2、增加了上传、下载中的进度事件。

3、跨域请求的支持。

4、允许发送匿名请求（即不发送HTTP的Referer部分）。

5、允许设置请求的超时。

在这篇教程中，我们主要关注第一和第二项特性，尤其是第二项——它能够提供我们想要的上传进度。和之前的方案不同，这个方案并不要求服务器作出特殊的设置，因此大家边看教程就可以边动手试试了。


上面图示的就是我们能够实现的内容：

1、显示上传的文件信息，比如文件名、类型、尺寸。

2、一个能够显示真实进度的进度条。

3、上传的速度。

4、剩余时间的估算。

5、已上传的数据量。

6、上传结束后服务器返回的响应。

另外，凭借XMLHttpRequest，我们的上传过程整个都是异步的，因此用户在上传文件的时候，依然可以操作网页当中的其它元素，并不需要专门等待上传的完成。而在上传结束后，我们能够获取服务器发回的响应，因此整个上传过程都显得相当顺理成章。

Ⅳ html网页上传文件的完整代码

html前端代码：

<html>
<body>
<formaction="upload-file.php"method="post"
enctype="multipart/form-data">
<labelfor="file">文件名:</label>
<inputtype="file"name="file"id="file"/>
<br/>
<inputtype="submit"name="submit"value="提交"/>
</form>
</body>
</html>

如果是ubuntu上部署apache2，你应该是php开发者吧，action="upload-file.php
" 中的upload-file.php改为你自己的后端php接收文件的逻辑代码即可！

这里提供upload-file.php后端接收文件的代码：

<?php
if($_FILES["file"]["error"]>0)
{
echo"错误:".$_FILES["file"]["error"]."<br/>";
}
else
{
echo"文件名:".$_FILES["file"]["name"]."<br/>";
echo"类型:".$_FILES["file"]["type"]."<br/>";
echo"大小:".($_FILES["file"]["size"]/1024)."Kb<br/>";
}
if(file_exists("upload/".$_FILES["file"]["name"]))
{
echo$_FILES["file"]["name"]."文件已经存在.";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
"upload/".$_FILES["file"]["name"]);
echo"文件已经被存储到:"."upload/".$_FILES["file"]["name"];
}
?>

代码很简单，我相信你应该能看懂，这里的 文件夹 upload/ 需要你自己手动创建，请确保文件路径正取！

我也是web开发者，有问题可继续追问我！或是加我工作室QQ(540144097)，在群里向我提问！有问必答，望采纳......

Ⅵ html点击button弹出选择文件，上传，这个怎么实现

<div class="button operating-button" id="fileUpdate-button">上传文件</div>
<form action="" id ="fileUpdate-form">
<input type="file" name="filename" id="fileUpdate-input" style="display: none" />
</form>
<script type="text/javascript">
//上传文件处理
var fileUpdate_button = document.getElementById("fileUpdate-button");
var fileUpdate_input = document.getElementById("fileUpdate-input");
var fileUpdate_form = document.getElementById("fileUpdate-form");
fileUpdate_button.onclick = function () {
fileUpdate_input.click();
}
fileUpdate_input.onchange = function () {
fileUpdate_form.submit();
}
</script>

Ⅶ html实现图片上传

html：

<section class="upload-section">

  <article class="upload-piclist">

    <div class="upload-file">

        <input type="file" id="file" accept="image/*" multiple onchange="imgChange()"/>

    </div>

  </article>

</section>

css:

/* body {

  margin: 0;

  padding: 0;

  max-width: 414px;

  margin: 0 auto;

  } */

  .upload-fh {

  background-image: url('data:image/png;base64,/NlyAAAD1klEQVRoQ+++d972/++T//++XRa2drCkDwG8E4B+A9BH8maZ2FrBkj4D8GYA+hHAKyT/thSRYiGnZtgJogeSgFNglYkgX/+/YOlgSf0AohTOkoBekj/B19KwBdcOz/++5mGm4WttHa3D892xJAspTwXX3Pae//+/+mIZ6GzAjt7iJ49RraWhf+gWnRXY0RaY2Frd/+/yB7sE9nCeW+p8Hjbm2nDAKwcahbAdGPfTGt3nM53/V00ckNMKWY8LAAAAABJRU5ErkJggg==');

  background-repeat: no-repeat;

  background-size: 100% 100%;

  height: 30px;

  width: 30px;

  }

  .upload-hedaer {

  height: 55px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  padding: 0 10px;

  box-sizing: border-box;

  align-items: center;

  text-align: center;

  background: #287cff;

  color: #fff;

  border-bottom: 1px solid #efefef;

  font-size: 19px;

  }

  .upload-hedaer div:last-child {

  text-align: right;

  }

  .upload-textarea {

  width: 100%;

  height: 60px;

  font-size: 28px;

  border: 1px solid #efefee;

  max-height: 300px;

  }

  .upload-article-text {

  width: 100%;

  padding: 10px;

  box-sizing: border-box;

  }

  .upload-file {

  position: relative;

  background: url('../images/z_add.png') no-repeat 50%/100% 100%;

  /* width: 100px; */

  height: 120px;

  order: 9;

  }

  .upload-piclist {

  padding: 0 10px;

  box-sizing: border-box;

  display: grid;

  grid-template-columns: repeat(3, 120px);

  justify-content: space-between;

  grid-gap: 14px;

  }

  #file {

  width: 100%;

  height: 100%;

  opacity: 0;

  }

  .upload-Picitem {

  width: 100%;

  height: 120px;

  }

  .upload-Picitem>img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  }

  .submit {

  padding: 15px 0;

  background-color: #287cff;

  color: #fff;

  text-align: center;

  margin: 10px;

  font-size: 20px;

  border-radius: 10px;

  }

  .upload-sm {

  padding: 10px;

  box-sizing: border-box;

  color: gray;

  }

  .upload-sm ol>li {

  margin-bottom: 10px;

  }

js:let picmax = 9; //限制上传数量

function imgChange() {

let file = document.getElementById('file').files;

let imglist = document.querySelectorAll('.upload-Picitem');

let piclist = document.getElementsByClassName('upload-piclist')[0];

let filelist = file.length + imglist.length > picmax ? 9 - imglist.length : file.length + imglist.length;

if (file.length + imglist.length >= 9) {

let uploadfile = document.getElementsByClassName('upload-file')[0]

uploadfile.style.display = "none"

}

for (let i = 0; i < filelist; i++) {

readerfile(file[i]).then(e => {

let html = document.createElement('div');

html.className = 'upload-Picitem'

html.innerHTML = '<img src=' + e + ' alt="pic">'

piclist.appendChild(html);

})

}

}

function readerfile(file) {

return new Promise((resolve, reject) => {

let reader = new FileReader();

reader.addEventListener("load", function() {

resolve(reader.result);

}, false)

if (file) {

reader.readAsDataURL(file)

}

})

}

//提交

function submit() {

let imglist = []

let text = document.getElementsByClassName('upload-textarea')[0].value

let piclist = document.querySelectorAll('.upload-Picitem');

for (let i = 0; i < piclist.length; i++) {

imglist.push(piclist[i].lastChild.src)

}

console.log("发布内容：", text)

console.log("图片列表：", imglist)

}

//textarea高度自适应

var autoTextarea = function(elem, extra, maxHeight) {

extra = extra || 0;

var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,

isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),

addEvent = function(type, callback) {

elem.addEventListener ?

elem.addEventListener(type, callback, false) :

elem.attachEvent('on' + type, callback);

},

getStyle = elem.currentStyle ? function(name) {

var val = elem.currentStyle[name];

if (name === 'height' && val.search(/px/i) !== 1) {

var rect = elem.getBoundingClientRect();

return rect.bottom - rect.top -

parseFloat(getStyle('paddingTop')) -

parseFloat(getStyle('paddingBottom')) + 'px';

};

return val;

} : function(name) {

return getComputedStyle(elem, null)[name];

},

minHeight = parseFloat(getStyle('height'));

elem.style.resize = 'none';

var change = function() {

var scrollTop, height,

padding = 0,

style = elem.style;

if (elem._length === elem.value.length) return;

elem._length = elem.value.length;

if (!isFirefox && !isOpera) {

padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));

};

scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

elem.style.height = minHeight + 'px';

if (elem.scrollHeight > minHeight) {

if (maxHeight && elem.scrollHeight > maxHeight) {

height = maxHeight - padding;

style.overflowY = 'auto';

} else {

height = elem.scrollHeight - padding;

style.overflowY = 'hidden';

};

style.height = height + extra + 'px';

scrollTop += parseInt(style.height) - elem.currHeight;

document.body.scrollTop = scrollTop;

document.documentElement.scrollTop = scrollTop;

elem.currHeight = parseInt(style.height);

};

};

// addEvent('propertychange', change);

// addEvent('input', change);

// addEvent('focus', change);

change();

};

pic:z_add.png

Ⅷ 怎样用html5实现拖拽上传文件

，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽区域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files; //获取文件对象
//检测是否是拖拽文件到页面的操作
if(fileList.length == 0){
return false;
}
//检测文件是不是图片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是图片！");
return false;
}

//拖拉图片到浏览器，可以实现预览功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //图片名称
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上传大小不能超过500K.");
return false;
}
var str = "<img src='"+img+"'><p>图片名称："+filename+"</p><p>大小："+filesize+"KB</p>";
$("#preview").html(str);

//上传
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var fd = new FormData();
fd.append('mypic', fileList[0]);

xhr.send(fd);
},false);
});

Ⅸ html怎么上传本机图片

如果只是做上传页面 只需要把HTML和图片放在同一个文件夹里面就可以了，
如果是要做上传功能，则需要建立一个服务器。

Ⅹ 如何把自己写的HTML代码发布到网上

1、首先，保证电脑上安装有ie类型浏览器，同时有一份php类型源代码，如图。