下载马上使用jquery拍照或手动多图上传H5php后台资源-CSDN文库

共2个文件

js：1个

html：1个

需积分: 3 144 浏览量 2022-06-14 18:13:05 上传评论收藏 34KB ZIP 举报

标题中的“下载马上使用 jquery 拍照或手动多图上传H5 php后台”表明这是一个关于使用jQuery实现H5拍照及多图上传功能，并结合PHP后台处理上传的教程。在这个项目中，用户可以通过H5页面调用设备摄像头进行拍照，或者选择本地图片进行上传，而这些操作将通过jQuery库来实现前端交互，最终数据会发送到PHP服务器进行存储和处理。我们需要了解jQuery。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互，使得JavaScript编程变得更加简单。在本项目中，jQuery将用于处理用户的选择和上传图片的交互，比如监听按钮点击事件，读取图片数据等。接着是H5（HTML5）技术，它是HTML的最新版本，提供了许多增强用户体验的新特性，如离线存储、多媒体支持、拖放功能等。在这个项目中，H5的`<input type="file">`元素将被用于选择图片，特别是其`accept`属性可以限制用户只能选择图片文件。另外，`getUserMedia`接口可以用来访问用户的摄像头，实现拍照功能。 PHP作为后端语言，负责接收前端发送的图片数据，通常是以Base64编码的方式，然后可以将图片保存到服务器的文件系统，或者存储到数据库中。PHP还可能处理一些验证和权限控制，比如检查文件类型、大小，以及用户是否具有上传权限。在压缩包中的`paizhao.html`可能是项目的主要入口文件，包含了HTML结构、CSS样式和jQuery脚本，用于实现拍照和上传界面。`img`目录很可能是用来存放上传图片的临时位置，或者存放示例图片。`js`目录则包含jQuery或者其他JavaScript文件，实现了与用户交互的逻辑，比如触发拍照、选取图片，以及将图片数据发送到服务器的函数。为了实现这个功能，你需要： 1. 在HTML中设置`<input type="file">`和拍照按钮。 2. 使用jQuery监听按钮事件，触发相应的操作，如调用摄像头或打开文件选择器。 3. 利用FileReader API读取图片文件并转化为Base64编码。 4. 将Base64编码的图片数据通过Ajax发送到PHP服务器。 5. PHP接收到数据后，解码并保存为图片文件，同时返回保存成功的信息。 6. 前端接收到服务器响应，更新界面，展示已上传的图片。这个项目涵盖了前端交互、多媒体处理、以及后端文件操作等多个方面，是学习和实践Web开发一个不错的实战案例。

资源详情

资源评论

资源推荐

收起资源包目录

331.zip （2个子文件）

img

paizhao.html 5KB

jquery.min.js 91KB

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" media="(device-height: 568px)"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>jqeury H5 拍照上传</title> <script src="js/jquery.min.js"></script> <style> .imageDiv { display:inline-block; width:100px; height:100px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:1px dashed darkgray; background:#f8f8f8; position:relative; overflow:hidden; margin:10px } .cover { position:absolute; z-index:1; top:0; left:0; width:100px; height:100px; background-color:rgba(0,0,0,.3); display:none; line-height:125px; text-align:center; cursor:pointer; } .cover .delbtn { color:red; font-size:10px; } .imageDiv:hover .cover { display:block; } .addImages { display:inline-block; width:100px; height:100px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:1px dashed darkgray; background:#f8f8f8; position:relative; overflow:hidden; margin:10px; } .text-detail { margin-top:10px; text-align:center; } .text-detail span { font-size:30px; } .file { position:absolute; top:0; left:0; width:100px; height:100px; opacity:0; } </style> </head> <body> <div style="width: 70%;margin: 0 auto"> <div id="Pic_pass"> <p style="font-weight: bold;">拍照或者手动上传图片</p> <p><span style="color: red">注：每张图片大小不可超过4M，一次最多可以上传4张</span></p> <div class="picDiv"> <div class="addImages"> <input type="file" class="file" name="file[]" id="fileInput" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg"> <div class="text-detail"> <span>+</span> <p>点击上传</p> </div> </div> </div> </div> <div class="msg" style="display: none;"></div> </div> <script> //图片上传预览功能 var userAgent = navigator.userAgent; //用于判断浏览器类型 $(".file").change(function() { //获取选择图片的对象 var docObj = $(this)[0]; var picDiv = $(this).parents(".picDiv"); //得到所有的图片文件 var fileList = docObj.files; //console.log(fileList); //循环遍历 for (var i = 0; i < fileList.length; i++) { UpLoadImg(fileList[i]); //动态添加html元素 var picHtml = "<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>"; // console.log(picHtml); picDiv.prepend(picHtml); //获取图片imgi的对象 var imgObjPreview = document.getElementById("img" + fileList[i].name); if (fileList && fileList[i]) { //图片属性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '100px'; imgObjPreview.style.height = '100px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式 if (userAgent.indexOf('MSIE') == -1) { //IE以外浏览器 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径; // console.log(imgObjPreview.src); // var msgHtml = '<input type="file" id="fileInput" multiple/>'; } else { //IE浏览器 if (docObj.value.indexOf(",") != -1) { var srcArr = docObj.value.split(","); imgObjPreview.src = srcArr[i]; } else { imgObjPreview.src = docObj.value; } } } } /*删除功能*/ $(".delbtn").click(function() { var _this = $(this); _this.parents(".imageDiv").remove(); }); }); function UpLoadImg(f){ //获取上传文件 var formData = new FormData(); formData.append('img_url', f); //console.log(formData) //提交后台处理 $.ajax({ url: 'a.php?action=1', type: 'POST', 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> </body> </html>