椒江建设工程机械厂网站,惠州 商城网站建设,一级域名网站建设,购物网站建设的可行性包括HTML基础设置、CSS界面优化、JS利用FormData对象和AJAX进行上传、后端接收文件并存储到指定路径以及删除文件操作。FE HTML 基础的设置#xff1a; form enctypemultipart/form-datainput idfile typefile multiple form enctypemultipart/form-datainput idfile typefile multiplemultiple namefile accept...input typesubmit value上传
/form
复制代码Form的enctype属性 enctype这个属性管理的是表单的MIME编码它一共有三个属性 值描述application/x-www-form-urlencoded在发送前编码所有字符默认multipart/form-data不对字符编码用来制定传输数据的特殊类型如mp3、jpgtext/plain纯文本传输因此传输完整的文件数据需要multipart/form-data属性。 Input value 保存了用户指定的文件的名称。 typefile 设置input类型为file。 multiplemultiple 可多选不设置为单选。 accept... 设置可选文件的MIME_type。在设置之后点击选择文件按钮会默认显示符合设置的MIME_type的文件存在兼容性。具体的文件类型对应的MIME类型可以搜索到这里列出我用到的类型 文件类型MIME类型.txttext/plain.pdfapplication/pdf.docapplication/msword.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document.xlsapplication/vnd.ms-excel.pptapplication/vnd.ms-powerpoint.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation效果 太丑不能忍... CSS 默认界面会在选择文件按钮后会跟一个显示文件名的文本区域选择文件按钮无法编辑。 我修改的方法是将input框隐藏再设置一个lable标签使用户点击lable标签时触发选择文件按钮。 label forfile选择文件/label
复制代码效果 JS 在使用from提交时浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。 为安全起见input typefile即file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略并且对于此类元素来说value属性是只读的这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名时file-upload 元素触发 onchange 事件句柄。 利用form提交会导致页面刷新体验不好所以使用AJAX进行文件上传是个不错的选择。但这需要我们自己来组织通过POST请求发送的内容。 FormData对象 通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data 则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。 —— MDN web docs 创建FormData对象 let formData new FormData();
复制代码向实例化对象中添加文件字段 let myFile document.getElementById(file);
// myFile.file[0]为第一个文件单选,多个文件多选则要循环添加
formData.append(myFile, myFile.files[0]);
复制代码console.log(myFile.files[0]);
复制代码 其中size属性单位是byte字节即b。 添加自定义字段 formData.append(username, simmzl);
复制代码AJAX发送 let request new XMLHttpRequest();
request.open(POST, http://foo.com/foo.php);
request.send(formData);
复制代码不使用FromData对象 不使用FormData对象的情况下需要通过AJAX序列化和提交表单 Using nothing but XMLHttpRequest PHP 接收 全局数组 $_FILES第一个参数是表单的 input name第二个下标是 name, type, size, tmp_name 或 error。可以根据这些属性做相关限制如限制文件大小、文件类型等。 值描述name文件名type文件的MIME类型size以字节Byte为单位的文件大小tmp_namePHP接收文件会存为暂时文件如需保存到指定路径还要移动这个暂时文件才可以error1-7代表7种不同错误类别以及0代表成功error 成功0(UPLOAD_ERR_OK) 失败 超过了配置文件上传文件的大小超过了表单设置上传文件的大小文件部分被上传没有文件被上传没有找到临时目录文件不可写由于PHP的扩展程序中断了文件上传验证 上传文件是通过POST发送的is_uploaded_file(file)函数可以判断指定的文件是否是通过 HTTP POST 上传的返回布尔值。 该函数可以用于确保恶意的用户无法欺骗脚本去访问本不能访问的文件例如 /etc/passwd。 这种检查显得格外重要如果上传的文件有可能会造成对用户或本系统的其他用户显示其内容的话。 保存 上传的文件暂存在tmp_name中需要使用move_uploaded_file(file,newlocation)将上传的文件移动到指定路径返回布尔值。 if( move_uploaded_file($tmp_name, $destination) ) {echo 文件上传成功;
}else{echo 文件移动失败;
}
复制代码删除 使用unlink(filepath)删除文件参数是文件路径。 拓展功能 当然除了接收、验证、保存和删除这四个基本操作外还可以添加诸如将文件路径存入数据库、生成文件列表等功能视需求而定。 最初发表于blog.simmzl.cn
