PhoneGap 上传图片HTML和服务器端端实现

合集下载

jQuery+PHP实现图片上传并提交功能

jQuery+PHP实现图⽚上传并提交功能图⽚上传思路：通过ajax实现图⽚上传，然后把PHP返回的图⽚地址，加⼊到隐藏字段中，最后通过表单提交给后台PHP，代码如下HTML代码 zimg.html⽂件：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>⾃定义上传图⽚</title></head><body><form action="a.php?action=2" method="post"><span>上传图⽚</span><span><input type="file" id="img_url" name="img_url" accept=".jpg, .gif, .jpeg, .bmp, .png"/><a onclick="UpLoadImg()">上传</a><input type="hidden" id="url_data" name="url_data"/></span><br><span><input type="submit" value="提交"></span></form></body><script src="https:///jquery-3.0.0.min.js"></script><script>function UpLoadImg(){//获取上传⽂件var formData = new FormData();formData.append('img_url', $('#img_url')[0].files[0]);console.log(formData)//提交后台处理$.ajax({url: 'a.php?action=1',type: 'POST',cache: false,data: formData,dataType: "JSON",processData: false,contentType: false}).done(function(res) {console.log(res.url);if(res.status == 1){//赋值给字段$('#url_data').val(res.url);alert(res.msg)}else{alert(res.msg)}}).fail(function(res) {});}</script></html>后台PHP代码 a.php：<?phpif($_GET['action'] == 1){//上传图⽚接⼝$img = $_FILES['img_url'];//获取上图⽚后缀$type = strstr($img['name'], '.');$rand = rand(1000, 9999);//命名图⽚名称$pics = date("YmdHis") . $rand . $type;//上传路径$pic_path = "img/". $pics;//移动到指定⽬录，上传图⽚$res = move_uploaded_file($img['tmp_name'], $pic_path);if($res){echo json_encode(['status' => 1, 'msg' => '上传成功','url' => $pic_path]);exit;}else{echo json_encode(['status' => 0, 'msg' => '上传失败']);exit;}}elseif($_GET['action'] == 2){//提交⽂件表单echo '<pre>';var_dump($_POST);}最后实现效果如下：ps：js代码是使⽤jQuery的写法，需引⼊jQuery代码库⽂件到此这篇关于jQuery加PHP实现图⽚上传并提交实现详解的⽂章就介绍到这了,更多相关jQuery加PHP实现图⽚上传并提交内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。

Html5上传图片移动端、PC端通用代码

Html5上传图⽚移动端、PC端通⽤代码废话不多说了，说⼀下今天给⼤家分享的是 html5上传图⽚。

我们是在移动端使⽤的，但是这个在pc上也通⽤兼容性我只在⾕歌测试过。

之前⼀直⽤的angular写的《⽤HTML5的File API做上传图⽚预览能》。

今天摒弃angular的东西分享⼀个html5 + js 图⽚上传案例。

那么今天还是按照⼀定的步骤来讲吧。

HTML 第⼀步创建html，我们在页⾯中放置⼀个⽂件选择的input#upload（PS：偷懒⼀下，这⾥就不再次写案例了直接复制的我们的页⾯）CSS Code复制内容到剪贴板1. <div class="con4">2. <span class="btn upload">上传<input type="file" class="upload_pic" id="upload" /></span>3. </div>CSS注：css 写的有些乱哈，看不懂的可以问我，或者直接⾃⼰写⼀下就ok。

CSS Code复制内容到剪贴板1. con{2. width: %;3. height: auto;4. overflow: hidden;5. margin: % auto auto;6. color: #FFFFFF;7. }8. con .btn{9. width: %;10. height: px;11. line-height: px;12. text-align: center;13. background: #dbc;14. display: block;15. font-size: px;16. border-radius: px;17. }18. upload{19. float: left;20. position: relative;21. }22. upload_pic{23. display: block;24. width: %;25. height: px;26. position: absolute;27. left: ;28. top: ;29. opacity: ;30. border-radius: px;31. }Javascript通过getElementById获取节点，判断浏览器的兼容性，对于不⽀持FileReader接⼝的浏览器将给出⼀个提⽰并禁⽤input，否则监听input的change事件。

图片上传原理

图片上传原理图片上传是指将本地的图片文件上传至网络服务器，以便在网页或者应用程序中进行展示或者分享。

图片上传原理涉及到客户端和服务器端的交互过程，下面将详细介绍图片上传的原理及相关知识。

首先，图片上传的原理是基于客户端和服务器端的通信机制。

用户在客户端选择要上传的图片文件后，通过浏览器或者应用程序将图片文件发送至服务器端。

在这个过程中，涉及到了HTTP协议和表单提交的相关知识。

其次，客户端通过浏览器或者应用程序选择图片文件后，将图片文件通过HTTP协议发送至服务器端。

HTTP协议是一种用于传输超文本数据的应用层协议，它是建立在TCP/IP协议之上的。

通过HTTP协议，客户端可以向服务器发送请求，并获取服务器的响应。

然后，客户端将图片文件通过表单提交的方式发送至服务器端。

表单是HTML中的一种交互元素，它可以包含各种类型的输入控件，比如文本框、下拉框、文件上传等。

当用户在表单中选择了要上传的图片文件后，通过表单提交的方式将图片文件发送至服务器端。

接着，服务器端接收到客户端发送的图片文件后，会对图片文件进行相应的处理。

服务器端可以对图片文件进行格式转换、大小压缩、水印添加等操作，以满足不同的需求。

在这个过程中，涉及到了服务器端的存储和处理技术。

最后，服务器端将处理后的图片文件保存在指定的位置，并返回一个访问路径给客户端。

客户端可以通过访问路径来获取服务器端保存的图片文件，并在网页或者应用程序中进行展示或者分享。

在这个过程中，涉及到了图片文件的访问和展示技术。

总结来说，图片上传的原理涉及到客户端和服务器端的通信机制，通过HTTP协议和表单提交的方式将图片文件发送至服务器端，然后服务器端对图片文件进行处理并保存，并返回一个访问路径给客户端。

这样，客户端就可以通过访问路径来获取服务器端保存的图片文件，实现在网页或者应用程序中的展示或者分享。

这就是图片上传的原理及相关知识。

html+css+js实现拍照预览上传图片功能

html+css+js实现拍照预览上传图⽚功能前⾔：我们在做⽹页时经常会需要有上传图⽚的需求，可能是选择图⽚或者拍照上传，如果简单的使⽤<input type="file"/>这种⽅式虽然也能实现功能，但⽤户体验上可能会差了⼀些，所以本⽂记录了使⽤css+js实现图⽚选中后的预览及压缩上传功能，部分带来来源于⽹络，此处做了记录整理。

效果预览：1.创建index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>拍照上传</title><link rel="stylesheet" href="index.css"/><script type='text/javascript' src='index.js' charset='utf-8'></script></head><body><form id="mainForm"><div class="content"><div class="label">⾝份证</div><div class="img-area"><div class="container"><input type="file" id='id-face' name='face' accept="image/*" /><div id='face-empty-result'><img style='width:4rem' src="https:///wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt=""><p>⾝份证正⾯照</p></div><img style='width: 100%' id='face-result'/></div><div class="container" style='margin-top:0.5rem;'><input type="file" id='id-back' name='back' accept="image/*" /><div id='back-empty-result'><img style='width:4rem' src="https:///wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt=""><p>⾝份证反⾯照</p></div><img style='width: 100%' id='back-result'/></div></div></div><div class="btn">提交</div></form></body></html>2.创建index.cssbody{margin: 0}.content{padding:0.5rem;display: flex;align-items: center;border-bottom: 1px #999 solid}.label{width:5rem;}.img-area{flex:1}.container{background-color:#e7e7e7;position: relative;}.container div{text-align: center;padding:0.5rem 0}.container input{opacity:0;filter:alpha(opacity=0);height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 9;}.container p{font-size: 0.9rem;color:#999}.btn{background-color: #4363ab;color: #fff;text-align: center;padding: 0.5rem 1rem;width:80%;border-radius: 0.2rem;margin: 2rem auto;font-weight: 600;font-size: 1.2rem}3.创建index.jswindow.onload=function(){document.getElementById("id-face").addEventListener("change", function(){onFileChange(this,"face-result","face-empty-result")});document.getElementById("id-back").addEventListener("change", function(){onFileChange(this,"back-result","back-empty-result")});document.getElementsByClassName("btn")[0].addEventListener("click", function(){ submit();});};/*** 选中图⽚时的处理* @param {*} fileObj input file元素* @param {*} el //选中后⽤于显⽰图⽚的元素ID* @param {*} btnel //未选中图⽚时显⽰的按钮区域ID*/function onFileChange(fileObj,el,btnel){var windowURL = window.URL || window.webkitURL;var dataURL;var imgObj = document.getElementById(el);document.getElementById(btnel).style.display="none";imgObj.style.display="block";if (fileObj && fileObj.files && fileObj.files[0]) {dataURL = windowURL.createObjectURL(fileObj.files[0]);imgObj.src=dataURL;} else {dataURL = fileObj.value;imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;}}/*** 将图⽚压缩后返回base64格式的数据* @param {*} image img元素* @param {*} width 压缩后图⽚宽度* @param {*} height 压缩后图⽚⾼度* @param {*} qua //图⽚质量1-100*/function compressImageTobase64(image,width,height,qua){var quality = qua ? qua / 100 : 0.8;var canvas = document.createElement("canvas"),ctx = canvas.getContext('2d');var w = image.naturalWidth,h = image.naturalHeight;canvas.width = width||w;canvas.height = height||h;ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h);var data = canvas.toDataURL("image/jpeg", quality);return data;}//提交function submit(){//1、form提交//document.getElementById("mainForm").submit();//2、压缩后ajax提交var face_data=compressImageTobase64(document.getElementById("face-result"),200,100,90);var back_data=compressImageTobase64(document.getElementById("back-result"),200,100,90);var formData = new FormData();formData.append("face",face_data);formData.append("back",back_data);//需引⼊jQuery$.ajax({url:"/地址",type: 'POST',cache: false,data: formData,timeout:180000,processData: false,contentType: false,success:function(r){},error:function(r){}});}源码：总结以上所述是⼩编给⼤家介绍的html+css+js 实现拍照预览上传图⽚功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

第18章 PhoneGap移动开发

（1）更实用的工具已经开发出更容易快速切换原生平台通过调整CLI工具，而无需学习新的编程语言。（2）支持新的平台 PhoneGap就已经支持iOS7、Windows Phone 8以及 BlackBerry 10。Firefox OS 和 Ubuntu也即将支持。（3）新的API接口两个新的API–InAppBrowser (原先的ChildBrowser插件)以及 Globalization（多语言） API。（4）流线型的插件架构一个优化精简的Cordova意味着更快，更小的应用程序，可以更方便地进行定制。
文件类型选择“eclipse项目文件(*.project)”，然后选择test目
录之中的“.project”文件打开项目。
test 项目还需要PhoneGap库文件， PhoneGap库文件放在与test 项目并列的framework目录之中，因此把framework目录
一起拷贝到Obtain_Studio的android_work目录下。另外，编译
拷贝文件
从自带例子中的\framework\bin\目录下拷贝库文件 “classes.jar” 到myPhoneGap项目libs目录下。
从 C:\Users\Administrator\.cordova\lib\android\
cordova\ 3.0.0\bin\ templates\project\目录下，把assets 所有文件拷贝到myPhoneGap项目libs目录下。
应的版本号。
2. PhoneGap自带例子分析
Cordova基于WebView组件。每个继承自DroidGap的
Activity对应一个独立的CordovaWebView。
Cordova提供了一个Class（DroidGap）和一个interface（ CordovaInterface）来让Android开发者开发Cordova。一般情况下实现DroidGap即可，因为DroidGap类已经做了很多准备工作，可以说DroidGap类是Cordova框架的一个重要部分；如

使用Phonegap实现离线功能

使⽤Phonegap实现离线功能PhoneGap使⽤Sqlite实现离线功能技术研究⽅案关键词：PhoneGap，Sqlite，跨平台，html，javascript，ajax，JSON PhoneGap使⽤Sqlite实现离线功能技术简介获取数据功能1）建⽴PhoneGap 环境2）通过ajax请求服务器获取JSON数据3）解析获取JSON数据。

离线功能1）调⽤PhoneGap 的api，制作数据库插件，并保存数据⾄数据库2）从数据库中查询数据，动态装载到html页⾯上。

PhoneGap使⽤Sqlite实现离线功能技术研究获取数据功能1.建⽴PhoneGap 环境（Android）1) 在PhoneGap官⽹下载PhoneGap最新版本的开发包PhoneGap 1.9.02) 创建Android项⽬，将PhoneGap 1.9.0包中的XML⽂件夹拷进项⽬中的res⽂件夹⾥，在⽂件夹asset中建⽴⽂件夹www，并把cordova-1.9.0.js拷进www⽂件夹中。

3) 在⼯程中加⼊corvoda-1.9.0.jar，通过buildpath导⼊⼯程中。

4) 在AndroidManifest.xml⾥加⼊以下代码：android:largeScreens="true"android:normalScreens="true"android:smallScreens="true"android:xlargeScreens="true"android:resizeable="true"android:anyDensity="true"/>5) 把src中的Activity改成继承DroidGap，setContextView()改成super.loadUrl("file:///android_asset/www/index.html")并在www⽂件夹建⽴index.html⽂件，在html⽂件中导⼊cordova-1.9.0.js完成以上步骤，PhoneGap环境配置成功2.通过ajax请求服务器获取JSON数据/**此⽅法实现字符串的排序功能//通过ajax请求服务器取得数据function request(){var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5旧版本浏览器使⽤以下代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}// open()三个参数意思：以GET/POST ⽅式，请求地址，是否使⽤异步xmlhttp.open("GET","http://10.108.1.113:8080/PassengerService/servlet/mServlet",true);// send()执⾏请求xmlhttp.send();xmlhttp.onreadystatechange=function(){// 请求成功，解析执⾏结果，并存储到数据库中if (xmlhttp.readyState==4 && xmlhttp.status==200){var result=xmlhttp.responseText;var shu = parserJSON(result);}else{// 请求失败，直接从数据库中查询window.plugins.simpleplugin.selectDB();}}}3.解析JSON数据@param JSONdata 传⼊要解析的JSON数据格式的字符串function parserJSON(JSONdata){var JSONobj=eval('('+JSONdata+')');//window.plugins为引⽤插件。

使用PhoneGap进行移动应用开发的实用指南

使用PhoneGap进行移动应用开发的实用指南移动应用开发的实用指南：使用PhoneGap移动应用开发是当今科技领域的一个重要方向，随着智能手机的普及，越来越多的人希望能够开发自己的移动应用。

PhoneGap作为一种开源框架，为开发者提供了一个便捷的工具，能够快速地构建跨平台的移动应用。

本文将向您介绍如何使用PhoneGap进行移动应用开发。

1. PhoneGap的概述PhoneGap是由Adobe公司开发和维护的一套移动应用开发框架，旨在帮助开发者利用常用的网页开发技术，如HTML5、CSS和JavaScript等，开发跨平台的移动应用。

它支持iOS、Android、Windows Phone等多个主流平台，并提供丰富的API和插件，方便开发者访问设备的硬件功能和系统资源。

2. 开始使用PhoneGap要开始使用PhoneGap，首先需要安装相应的开发工具。

对于iOS平台，您需要安装Xcode开发环境；对于Android平台，您需要安装Android SDK。

安装完成后，您可以在终端（MacOS系统）或命令行（Windows系统）下使用命令行工具创建一个新的PhoneGap项目。

3. 创建新的PhoneGap项目在命令行中，使用以下命令创建一个新的PhoneGap项目：```phonegap create myapp --id com.example.myapp --name "My App"```其中，`myapp`是您的项目名称，`com.example.myapp`是您的应用的唯一标识符（Bundle ID或包名），`My App`是您的应用名称。

4. 构建应用界面PhoneGap项目的文件结构如下：```myapp/├── www/│ ├── index.html│ ├── css/│ ├── js/│ └── img/└── platforms/```在`www`文件夹中的`index.html`文件是您应用的主页面。

前端开发技术中的文件上传与图片处理方法

前端开发技术中的文件上传与图片处理方法文件上传与图片处理是前端开发中非常重要的一部分，它涉及到用户上传文件的安全性和图片的展示与处理。

在这篇文章中，我们将探讨一些常见的文件上传和图片处理方法，以及它们在前端开发中的应用。

一、文件上传的基本原理和常用方法文件上传是指将用户选择的文件从客户端上传到服务器的过程。

它通常涉及到两个方面的技术：前端技术和后端技术。

在前端技术中，常用的文件上传方法有两种：表单上传和Ajax上传。

表单上传是指使用HTML的<form>元素来实现文件上传功能。

用户通过选择文件并提交表单的方式，将文件上传到服务器。

这种方法简单易用，但页面会刷新，用户体验不佳。

Ajax上传是指使用XMLHttpRequest对象将文件异步上传到服务器，实现无刷新的上传操作。

这种方法适用于需要实时显示上传进度的场景，但需要编写更多的JavaScript代码。

在后端技术中，常用的文件上传方法有两种：传统文件上传和基于云存储的文件上传。

传统文件上传是指将文件保存到服务器本地的文件系统中，以文件路径的形式存储在数据库中。

这种方法操作简单，但对服务器的存储容量有一定要求。

基于云存储的文件上传是指将文件存储到云存储平台中，例如七牛云、阿里云等。

这种方法可以解决存储容量有限的问题，并提供了更好的安全性和可靠性。

二、图片处理的基本原理和常用方法图片处理是指对用户上传的图片进行编辑、处理和展示的过程。

它通常包括图像压缩、裁剪、缩放和滤镜等操作。

在前端技术中，常用的图片处理方法有两种：Canvas处理和CSS处理。

Canvas处理是指使用HTML5的Canvas元素对图片进行操作。

通过Canvas，我们可以实现图像的裁剪、缩放、旋转等操作，并可以将处理后的图像作为新图片进行展示或下载。

CSS处理是指使用CSS样式对图片进行处理。

通过CSS样式，我们可以实现图像的圆角、阴影、滤镜等效果，同时不改变原始图片的尺寸和像素。

HTML5Plus实现手机APP拍照或相册选择图片上传功能

HTML5Plus实现⼿机APP拍照或相册选择图⽚上传功能利⽤HTML Plus的Camera、GalleryIO、Storage和Uploader来实现⼿机APP拍照或者从相册选择图⽚上传。

Camera模块管理设备的摄像头，可⽤于拍照、摄像操作，通过plus.camera获取摄像头管理对象。

Gallery模块管理系统相册，⽀持从相册中选择图⽚或视频⽂件、保存图⽚或视频⽂件到相册等功能。

通过plus.gallery获取相册管理对象。

IO模块管理本地⽂件系统，⽤于对⽂件系统的⽬录浏览、⽂件的读取、⽂件的写⼊等操作。

通过plus.io可获取⽂件系统管理对象。

Storage模块管理应⽤本地数据存储区，⽤于应⽤数据的保存和读取。

应⽤本地数据与localStorage、sessionStorage的区别在于数据有效域不同，前者可在应⽤内跨域操作，数据存储期是持久化的，并且没有容量限制。

通过plus.storage可获取应⽤本地数据管理对象。

Uploader模块管理⽹络上传任务，⽤于从本地上传各种⽂件到服务器，并⽀持跨域访问操作。

通过plus.uploader可获取上传管理对象。

Uploader上传使⽤HTTP的POST⽅式提交数据，数据格式符合Multipart/form-data规范，即rfc1867（Form-based File Upload in HTML）协议。

XML/HTML Code复制内容到剪贴板1. <!doctype html>2. <html class="feedback">3. <head>4. <meta charset="utf-8" />5. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />6. <meta name="misapplication-tap-highlight" content="no" />7. <meta name="HandheldFriendly" content="true" />8. <meta name="MobileOptimized" content="320" />9. <title>HTML5 Plus 拍照或者相册选择图⽚上传</title>10. <link rel="stylesheet" href="../../css/mui.min.css">11. <link rel="stylesheet" type="text/css" href="../../css/app.css" />12. <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />13. <link rel="stylesheet" type="text/css" href="../../css/feedback-page.css" />14. <link rel="stylesheet" href="../../css/font-awesome.min.css">15. <script src="../../js/jquery.js"></script>16. <script type="text/javascript" src="../../js/common.js"></script>17. <script type="text/javascript" src="../../js/utitls.js"></script>18. <script type="text/javascript" src="/api?ak=59PBaEOro16CiH2W4CG81zEN&v=2.0"></script>19. <style type="text/css">20. .del {21. position: absolute;22. top:1px;23. right: 1px;24. display: block;25. line-height: 1;26. cursor: pointer;27. color:#fff;28. }29.30. .del:hover {31. color:#ff3333;32. }33. </style>34. <style>35. .table-view {36. position: relative;37. margin-top: 0;38. margin-bottom: 0;39. padding-left: 0;40. list-style: none;41. background-color: #f5f5f5;42. }43.44. .table-view-cell {45. position: relative;46. overflow: hidden;47. padding: 0px 15px;48. -webkit-touch-callout: none;49. margin-bottom: 1px;50. }51.52. .table-view-cell:after {53. position: absolute;54. right: 0;55. bottom: 0;56. left: 0px;57. height: 1px;58. content: '';59. -webkit-transform: scaleY(.5);60. transform: scaleY(.5);61. background-color: #c8c7cc;62. }63.64. .table-view-cell>a:not(.btn) {65. position: relative;66. display: block;67. overflow: hidden;68. margin: -0px -15px;69. padding: inherit;70. white-space: nowrap;71. text-overflow: ellipsis;72. color: inherit;73. background-color: #75b9f4;74. height: 40px;75. line-height: 40px;76. }77.78. .navigate-right:after79. {80. font-family: Muiicons;81. font-size: inherit;82. line-height: 1;83. position: absolute;84. top: 50%;85. display: inline-block;86. -webkit-transform: translateY(-50%);87. transform: translateY(-50%);88. text-decoration: none;89. color: #666;90. -webkit-font-smoothing: antialiased;91. }92.93. .table-view-cell.collapse .collapse-content {94. position: relative;95. display: none;96. overflow: hidden;97. margin: 0px -15px 0px;98. padding: 0px 0px !important;99. -webkit-transition: height .35s ease; 100. -o-transition: height .35s ease;101. transition: height .35s ease;102. background-color: transparent;103. }104. .image-item{105. position: relative;106. }107. .image-item .info{108. position: absolute;109. top:0px;110. left:4px;111. color: #ff9900;112. font-size: 12px;113.114. }115. </style>116. </head>117. <body>118. <header class="bar bar-nav">119. <h1 class="title">拍照或者相册选择图⽚上传</h1>120. </header>121. <div class="content">122. <div style="margin-top: 10px;"></div>123. <input type="hidden" id="ckjl.id" name="ckjl.id" value="429">124. <div class="collapse-content" >125. <form>126. <label class="row-label"></label>127. <div id='F_CKJLBS' class="row image-list">128. <div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div>129. </div>130. </form>131. </div>132. </div>133. <script src="../../js/mui.min.js"></script>134. <script>135. var procinstid = 0;136. //初始化页⾯执⾏操作137. function plusReady() {138. //Android返回键监听事件139. plus.key.addEventListener('backbutton',function(){140. myclose();141. },false);142. }143. if (window.plus) {144. plusReady();145. } else {146. document.addEventListener('plusready', plusReady, false);147. }148. //加载页⾯初始化需要加载的图⽚信息149. //或者相册IMG_20160704_112620.jpg150. //imgId:图⽚名称：1467602809090或者IMG_20160704_112620151. //imgkey:字段例如：F_ZDDZZ152. //ID：站点编号ID,例如429153. //src：src="file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/upload/F_ZDDZZ-1467602809090.jpg"154. function showImgDetail (imgId,imgkey,id,src) {155. var html = "";156. html +='<div id="Img'+imgId+imgkey+'" class="image-item ">';157. html +=' <img id="picBig" data-preview-src="" data-preview-group="1" '+src+'/>';158. html +=' <span class="del" onclick="delImg(\''+imgId+'\',\''+imgkey+'\','+id+');">';159. html +=' <div class="fa fa-times-circle"></div>';160. html +=' </span>';161. html +='</div>';162. $("#"+imgkey+"S").append(html);163. }164. //删除图⽚165. //imgId:图⽚名称：IMG_20160704_112614166. //imgkey:字段，例如F_ZDDZZ167. //ID：站点编号ID，例如429168. function delImg(imgId,imgkey,id){169. var bts = ["是", "否"];170. plus.nativeUI.confirm("是否删除图⽚？", function(e) {171. var i = e.index;172. if (i == 0) {173. var itemname=id+"img-"+imgkey;//429img-F_ZDDZZ174. var itemvalue=plus.storage.getItem(itemname);175. //{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}176. if(itemvalue!=null){177. var index=itemvalue.indexOf(imgId+",");178. if(index==-1){//没有找到179. delImgfromint(imgId,imgkey,id,index);180. }else{181. delImgFromLocal(itemname,itemvalue,imgId,imgkey,index); //修改，加了⼀个index参数182. }183.184. }else{185. delImgfromint(imgId,imgkey,id);186. }187. }188. },"查勘", bts);189. /*var isdel = confirm("是否删除图⽚？");190. if(isdel == false){191. return;192. }*/193.194.195. }196. function delImgFromLocal(itemname,itemvalue,imgId,imgkey,index){197. var wa = plus.nativeUI.showWaiting();198. var left=itemvalue.substr(0,index-1);199. var right=itemvalue.substring(index,itemvalue.length);200. var end=right.indexOf("}");201. rightright=right.substring(end+1,right.length);202. var newitem=left+right;203. plus.storage.setItem(itemname,newitem);204. myAlert("删除成功");205. $("#Img"+imgId+imgkey).remove();206. wa.close();207. }208. //选取图⽚的来源，拍照和相册209. function showActionSheet(conf){210. var divid = conf.id;211. var actionbuttons=[{title:"拍照"},{title:"相册选取"}];212. var actionstyle={title:"选择照⽚",cancel:"取消",buttons:actionbuttons};213. plus.nativeUI.actionSheet(actionstyle, function(e){214. if(e.index==1){215. getImage(divid);216. }else if(e.index==2){217. galleryImg(divid);218. }219. } );220. }221. //相册选取图⽚222. function galleryImg(divid) {223. plus.gallery.pick( function(p){224. //alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg225. plus.io.resolveLocalFileSystemURL(p, function(entry) {226. //alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg 227. //alert();//IMG_20160704_112620.jpg228. compressImage(entry.toLocalURL(),,divid);229. }, function(e) {230. plus.nativeUI.toast("读取拍照⽂件错误：" + e.message);231. });232. }, function ( e ) {233. }, {234. filename: "_doc/camera/",235. filter:"image"236. } );237. }238. // 拍照239. function getImage(divid) {240. var cmr = plus.camera.getCamera();241. cmr.captureImage(function(p) {242. //alert(p);//_doc/camera/1467602809090.jpg243. plus.io.resolveLocalFileSystemURL(p, function(entry) {244. //alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg 245. //alert();//1467602809090.jpg246. compressImage(entry.toLocalURL(),,divid);247. }, function(e) {248. plus.nativeUI.toast("读取拍照⽂件错误：" + e.message);249. });250. }, function(e) {251. }, {252. filename: "_doc/camera/",253. index: 1254. });255. }256. //压缩图⽚257. function compressImage(url,filename,divid){258. var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg259. pressImage({260. src:url,//src: (String 类型 )压缩转换原始图⽚的路径261. dst:name,//压缩转换⽬标图⽚的路径262. quality:20,//quality: (Number 类型 )压缩图⽚的质量.取值范围为1-100263. overwrite:true//overwrite: (Boolean 类型 )覆盖⽣成新⽂件264. },265. function(event) {266. //uploadf(event.target,divid);267. var path = name;//压缩转换⽬标图⽚的路径268. //event.target获取压缩转换后的图⽚url路269. //filename图⽚名称270. saveimage(event.target,divid,filename,path);271. },function(error) {272. plus.nativeUI.toast("压缩图⽚失败，请稍候再试");273. });274. }275. //保存信息到本地276. /**277. *278. * @param {Object} url 图⽚的地址279. * @param {Object} divid 字段的名称280. * @param {Object} name 图⽚的名称281. */282. function saveimage(url,divid,name,path){283. //alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg 284. //alert(path);//_doc/upload/F_ZDDZZ-1467602809090.jpg285. var state=0;286. var wt = plus.nativeUI.showWaiting();287. // plus.storage.clear();288. namename=name.substring(0,name.indexOf("."));//图⽚名称：1467602809090289. var id = document.getElementById("ckjl.id").value;290. var itemname=id+"img-"+divid;//429img-F_ZDDZ291. var itemvalue=plus.storage.getItem(itemname);292. if(itemvalue==null){293. itemvalue="{"+name+","+path+","+url+"}";//{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}294. }else{295. itemvalueitemvalue=itemvalue+"{"+name+","+path+","+url+"}";296. }297. plus.storage.setItem(itemname, itemvalue);298.299. var src = 'src="'+url+'"';300. //alert("itemvalue="+itemvalue);301. showImgDetail(name,divid,id,src);302. wt.close();303.304. }305. //上传图⽚，实例中没有添加上传按钮306. function uploadimge(agree,back) {307. //plus.storage.clear();308. var wa = plus.nativeUI.showWaiting();309. var DkeyNames=[];310. var id = document.getElementById("ckjl.id").value;311. var length=id.toString().length;312. var ididnmae=id.toString();313. var numKeys=plus.storage.getLength();314. var task = plus.uploader.createUpload(getUrl() + 'url', {315. method: "POST"316. },317. function(t, status) {318. if (status == 200) {319. console.log("上传成功");320. $.ajax({321. type: "post",322. url: getUrl() + 'url',323. data: {324. taskId: taskId,325. voteAgree: agree,326. back: back,327. voteContent: $("#assign").val(),328. },329. async: true,330. dataType: "text",331. success: function(data) {332. wa.close();333. goList(data);334.335.336. },337. error: function() {338. wa.close();339. myAlert("⽹络错误，提交审批失败，请稍候再试");340. }341. });342.343.344. } else {345. wa.close();346. console.log("上传失败");347. }348. }349. );350. task.addData("id",id);351. for(var i=0; i<imgArray.length;i++){352. var itemkey=id+"img-"+imgArray[i];353. if(plus.storage.getItem(itemkey)!=null){354. var itemvalue=plus.storage.getItem(itemkey).split("{");355. for(var img=1;img<itemvalue.length;img++){356. var imgname=itemvalue[img].substr(0,itemvalue[img].indexOf(","));357. var imgurl=itemvalue[img].substring(itemvalue[img].indexOf(",")+1,itemvalue[img].lastIndexOf(",")); 358. task.addFile(imgurl,{key:imgurl});359. }360. }361. }362. task.start();363.364. }365. </script>366. </body>367. </html>368.效果图：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

用PhoneGap+jQueryMobile开发Android应用实例

用PhoneGap + jQuery Mobile开发Android应用前言 (2)PhoneGap及jQueryMobile介绍 (2)开发环境的搭建 (2)下载并按照JAVA SDK (2)下载并安装Android SDK (2)创建虚拟设备 (3)下载并安装Eclipse (4)下载并安装ADT Plugin (4)下载并解压Cordova (5)下载jQuery Mobile (5)第一个手机应用 (5)创建工程 (5)整合Cordova (8)整合jQueryMobile (10)制作apk (13)参考资料 (16)1.前言随着移动终端计算能力的提升，移动应用变得越来越受人青睐，也越来越流行；尤其以iOS和Android平台为主的手机，已经淘汰了大多数人的手机。

新的平台产生了新的SDK，新的UI，新的使用习惯和用户体验。

而因为计算能力的增强，手机的渲染能力也大幅增强，从而催生了以WebKit为内核的浏览器的广泛应用。

并以此而衍生出了手机上的HTML+CSS应用。

至此，手机应用的开发也与传统PC的开发一样，多了一条低成本开发的坦途。

除却传统的基于原生SDK的开发不谈，基于HTML+CSS+js的开发已经变得越来越流行，也越来越受欢迎，特别是一些小应用开发商。

因此而衍生的开发框架如雨后春笋：PhoneGap，AppCan，Rexsee等等。

这些框架都是采用桥接的方式，在系统(iOS/Android)原生SDK的基础上，创建一个以WebKit为运行环境的本地Web应用，并为js引擎暴露本地功能(服务)的访问接口，从而实现以HTML+CSS展示界面，以js控制程序流程的手机应用。

这种应用看上去与原生SDK开发的应用并无二致，甚至可能拥有更好的用户界面和用户体验。

因为网页的开发技术越来越成熟，各种库的适用性，兼容性越来越强，而且也越来越注重用户界面与用户体验的提升，其中的佼佼者有最初的Prototype，Yahoo!；现在大行其道的jQuery，ExtJs，Dojo等等。

html5调用手机摄像头，实现拍照上传功能

html5调⽤⼿机摄像头，实现拍照上传功能今天做⼿机⽹站，想实现⼿机扫描⼆维码功能。

⾸先实现在浏览器中调⽤⼿机摄像头，实现拍照功能并且把拍下的照⽚显⽰在页⾯并上传到服务器上，然后再在服务器端进⾏分析。

⾸先实现在浏览器中调⽤摄像头，当然⽤现在⽕的不⾏的html5，html5中的<video>标签，并将从摄像头获得视频作为这个标签的输⼊来源。

实现拍照功能的html5代码：<article><style scoped>video { transform: scaleX(-1); }p { text-align: center; }</style><h1>Snapshot Kiosk</h1><section id="splash"><p id="errorMessage">Loading...</p></section><section id="app" hidden><p><video id="monitor" autoplay></video> <canvas id="photo"></canvas><p><input type=button value="📷" onclick="snapshot()"></section><script>navigator.getUserMedia({video:true}, gotStream, noStream);var video = document.getElementById('monitor');var canvas = document.getElementById('photo');function gotStream(stream) {video.src = URL.createObjectURL(stream);video.onerror = function () {stream.stop();};stream.onended = noStream;video.onloadedmetadata = function () {canvas.width = video.videoWidth;canvas.height = video.videoHeight;document.getElementById('splash').hidden = true;document.getElementById('app').hidden = false;};}function noStream() {document.getElementById('errorMessage').textContent = 'No camera available.';}function snapshot() {canvas.getContext('2d').drawImage(video, 0, 0);}</script></article>经本⼈测试在android⼿机的opera浏览器浏览器下可以正常实现⼿机拍照功能。

在Android平台下搭建PhoneGap开发环境--用HTML5开发游戏

一、在Android 平台下搭建PhoneGap 开发环境具体怎么搭建我这里就不详细说了，如有需要我后面再讲。

PhoneGap 官方地址有详细说明：.在这里先对PhoneGap 介绍一下：PhoneGap 是一款基于HTML5标准的跨平台开源手机Web 应用开发框架，PhoneGap 现在更名为Cordova ，他允许用户通过Web 技术访问移动设备的本地应用、API 接口及应用程序框架等。

PhoneGap 将移动设备提供的API 进行抽象和简化，提供了丰富的API 接口供开发者使用(API 在不断地升级中，需要实时关注PhoneGap 最新动态，在PhoneGap 中对API 进行了非常详细的介绍，并给出了丰富的实例)开发者只要会编写HTML 和JS 语言，就可以将这款程序运行在Android ，IOS ，WebOS 等多种平台的手机中。

目前PhoneGap 已提供了丰富的接口：/en/1.7.0/cordova_accelerometer_accelerometer.md.ht ml#Accelerometer 有介绍。

二、悦成移动—移动互联网黄埔军校三、 8万学员只要12周年薪14万四、五、网址：/it/index.html 六、或百度悦成七、二、来看看我的实例(1).其中android_asset/www/地方是我们放资源文件的地方，游戏资源全部放在这里(此实例HTML5游戏代码非本人所写，作者未知)(2).注意两个地方一是在Activity 中，再也不是extends Activity 了，而是extends DroidGap 。

?代码片段，双击复制01 02 03 04 05 06 packageorg.askon.activity;importorg.apache.cordova.DroidGap;importandroid.os.Bundle;publicclassHelloHtml5Activity extendsDroidGap {/** Called when the activity is first created. */@Override07 08 09 10 11 1213publicvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); }}二是在配置文件中主Activity 中注意要加上android:configChanges="orientation|keyboardHidden" 还要加上一些必须的配置文件 ?代码片段，双击复制01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <?xml version="1.0"encoding="utf-8"?> <manifestxmlns:android="/apk/res/android" package="org.askon.activity"android:versionCode="1"android:versionName="1.0"><uses-sdkandroid:minSdkVersion="10"/> <supports-screensandroid:anyDensity="true"android:largeScreens="true"android:normalScreens="true"android:resizeable="true"android:smallScreens="true"/><uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.VIBRATE"/> <uses-permissionandroid:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permissionandroid:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/> <uses-permissionandroid:name="android.permission.READ_PHONE_STATE"/> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.RECEIVE_SMS"/> <uses-permission android:name="android.permission.RECORD_AUDIO"/> <uses-permissionandroid:name="android.permission.MODIFY_AUDIO_SETTINGS"/> <uses-permission android:name="android.permission.READ_CONTACTS"/> <uses-permission android:name="android.permission.WRITE_CONTACTS"/> <uses-permission32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.GET_ACCOUNTS"/> <uses-permission android:name="android.permission.BROADCAST_STICKY"/> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name"> <activity android:name=".HelloHtml5Activity" android:configChanges="orientation|keyboardHidden" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="UNCHER"/> </intent-filter> </activity> </application> </manifest>。

H5实现手机拍照和选择上传功能

H5实现⼿机拍照和选择上传功能本⽂实例为⼤家分享了H5⼿机拍照和选择上传的具体代码，供⼤家参考，具体内容如下1. html/ js代码：<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta http-equiv="Access-Control-Allow-Origin" content="*" /><link rel="stylesheet" href="../../css/mui.min.css" ><link rel="stylesheet" type="text/css" href="../../css/app.css" /><link rel="stylesheet" type="text/css" href="../../css/icons-extra.css" /><link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" ></head><body onload="startTime()"><div class="mui-card" style="height: 20%;"><div class=" mui-card-media"><img class="a" id="img" /><label for="myFile"><span id="format" class="a mui-icon mui-icon-camera" style="font-size: -webkit-xxx-large;"></span></label><input style="display: none;" type="file" capture="camera" id="myFile" onchange="upload('#myFile', '#img');" /></div></div><script src="../../js/mui.js"></script><script src="../../js/mui.picker.min.js"></script><script src="../../js/host.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">/**拍照* @param {Object} c* @param {Object} d*/var upload = function(c, d) {"use strict";var $c = document.querySelector(c),$d = document.querySelector(d),file = $c.files[0],picPath = $c.value,reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(e) {$d.setAttribute("src", e.target.result);};localStorage.setItem('picPath', picPath);};</script></html>2. 参数解析：1. accept 属性（允许上传两种⽂件类型：gif 和 jpeg）2. capture 捕获到系统默认的设备，有三个参数值可设置3. camera--照相机；camcorder--摄像机； microphone--录⾳4. js代码做了封装, 参数⼀表⽰ "选择⽂件"的 id，参数⼆表⽰ "显⽰图⽚" 的 id，5. 若是 ios 只能调⽤摄像头，不能选择打开相册的话，就把这个【capture="camera"】去掉，直接加⼀个属性 multiple6. file 表⽰你选中的那个图⽚，然后它⾥⾯有⼏个属性 name、size、type、slice等，也都⾮常实⽤，7. FileReader作为⽂件API的重要成员⽤于读取⽂件，根据W3C的定义，FileReader接⼝提供了读取⽂件的⽅法和包含读取结果的事件模型。

第13讲 PhoneGap应用介绍

• 1.PhoneGap是比较底层的库，对表现层没有支持，所以用 phoneGap开发需要再加上jQuery或XUI，YUI这类UI层的东西； • 2.phoneGap主要的好处是学习成本不算高，缺点是速度慢，内存容易溢出。 • 3.jQuery主要优势是微软支持，学习资料多，热度高。缺点是学习成本高，默认模板很难看，想做个性化修改特别麻烦，而且速度也因为兼容太多浏览器（连IE也兼容，这对移动应用多累赘啊）比较慢。基本上如果你的技术方案是phoneGap+jQuery，最好不要做超过5页的产品设计，而且尽量不要做拍照，文字输入等互动功能。 • 4.sencha主要的优势其实是云端服务支持，但对国内的人来说就享受不到了。 • 5.Titanium是我们遇到的国外的HTML5工具效率最好的一个，因为他们把不少HTML和CSS代码预编译成了JavaScript，这点在开发 Julia时我们也借鉴了。缺点是学习曲线比较高，当然如果你是JS熟手就容易很多。
HTML5移动Web开发
第21页
另一种观点
• 1.PhoneGap(with jQTouch)：可用API比较少，但可选UI样式比较多。 • 2.Titanium Mobile：更多依靠JavaScript，因此开发意味比设计意味更重。相比来说，可用API更多一些。值得一提的是，需要使用它自己的桌面应用来编译和打包app。 • 3.Sencha Touch：是一个HTML5，CSS3和 JavaScript结合的Web App开发框架，更多用来开发Web App而不是提交到Appstore的源生应用，但能在Webkit浏览器里支持多种手势操作。
HTML5移动Web开发
第13页
（3）利用iOS5进行远程web调试

HTML+jQuery图片上传示例

HTML+jQuery图⽚上传⽰例图⽚上传HTML部分只需要增加⼀个表单或在原有的表单中添加<input type="file">的标签，表单⽰例如下：1<form id="imageForm" enctype="multipart/form-data" action="url" method="POST">2<input type="text" name="imgName"/>3<input type="file" name="image" accept=""/>4<button type="submit">上传</button>5</form>其中，form和input[type="file"]的属性是图⽚或者⽂件上传的关键属性；对于要上传图⽚或⽂件的表单form，其必要属性为enctype="multipart/form-data"，这⼀属性主要作⽤是将form的MIME编码设置成⼆进制，为图⽚或⽂件上传提供编码基础。

注：表单form的默认MIME编码为application/x-www-form-urlencoded。

接下来，是input[type="file"]的属性设置。

input[type="file"]是调⽤了HTML默认提供的本地⽂件选择的控件。

其中，accept属性定义了空间打开时默认浏览的⽂件格式。

accept的部分值（与图⽚上传相关的值）及其对应的⽂件格式如下表所⽰：值对应的⽂件image/*所有图⽚⽂件image/png png格式的图⽚image/jpeg jpg格式的图⽚image/gif gif格式的图⽚image/png,image/jpeg,image/gif png,jpg,gif格式的图⽚上述表单能完成图⽚上传的前台⼯作，但每次提交表单之后都会刷新页⾯，会影响⽤户的交互体验。

php实现接收客户端上传的图片

php实现接收客户端上传的图⽚今天，遇到⼀个服务端接收客户端上传图⽚的需求，经过学习。

我写了个简单的demo以备下次学习。

⾸先服务器接收的发送图⽚的请求⼀定要是post请求，⽽且请求⼀定要加上 enctype="multipart/form-data" 缺⼀不可下⾯是例⼦，写个简单的浏览器端的：<html><head><title> Upload file example. </title></head><body><form method="post" action="recpic.php" enctype="multipart/form-data"><table border=0 cellspacing=0 cellpadding=0 align=center width="100%"><tr><td width=55 height=20 align="center"><input type="hidden" name="MAX_FILE_SIZE" value="2000000">⽂件：</TD><td height="16"><input name="file" type="file"/><input type="submit" name="submit" value="Submit"/></td></tr></table></form></body></html><?php/*** 接收上传的图⽚** ------------* 200 ok* 401 Error method* 500 Internal error* ------------*/require_once("../inc/connect_db.php");require_once("../response.php");header('Access-Control-Allow-Origin: *'); // 解决前段javascript跨域请求//print_r($_FILES);$filename = $_FILES['file']['name'];$tmp_name = $_FILES['file']['tmp_name'];//将服务器上的临时⽂件移动到指定⽬录下//使⽤该⽅法move_uploaded_file($tmp_name , $destination)move_uploaded_file($tmp_name , "../files/".$filename);echo$filename;exit();上⽂有注释不赘述，这⾥还搜集了⼀些关于上传⽂件$_FILES()的重要⽅法：$_FILES['myFile']['name'] 显⽰客户端⽂件的原名称。

html上传原理

html上传原理
HTML文件上传的原理是通过表单提交（form）来实现的。

具体步骤如下：
1. 在HTML文档中创建一个表单元素（form），设置合适的属性，如提交方式（method）为POST，目标地址（action）为服务器端处理上传文件的脚本。

2. 在表单中添加一个文件选择控件（input），设置其类型（type）为file，这样用户就可以通过点击按钮选择要上传的文件。

3. 设置表单的编码方式（enctype）为multipart/form-data，这样可以支持文件上传，而不是默认的application/x-www-form-urlencoded编码。

4. 在表单中添加一个提交按钮（input），设置其类型（type）为submit，用户点击该按钮后将触发表单提交操作。

5. 当用户选择了文件并点击提交按钮后，浏览器会将选择的文件以二进制流的形式打包，并随着其他表单数据一起发送到服务器。

6. 服务器接收到请求后，会解析请求体中的数据，根据不同的文件控件名称获取对应的文件数据，保存到指定的位置。

需要注意的是，HTML本身并不支持文件上传的操作，上传功能是通过表单和服务器端脚本的配合来实现的。

而且，表单中的每一个表单控件都需要有独一无二的名称，以便服务器端能够正确地获取和处理上传的文件数据。