location ~ .*\.(js|css|gif|jpg|jpeg|png|bmp|swf|flv|html|htm)$

时间: 2023-10-27 08:05:23 浏览: 290

通过JS获取用户本地图片路径并显示的代码

在现代网络应用中，用户经常需要上传图片，而预览所选择的图片对于提升用户体验是非常重要的。本知识点将会解释如何通过JavaScript（简称JS）获取用户在本地选择的图片路径，并在网页上显示出来，这一功能主要用在文件上传过程中，用户在上传之前需要先预览图片。我们要了解HTML（超文本标记语言）中的`<input type="file">`标签，它允许用户从本地计算机上选择文件。当用户选择了一个文件后，我们可以通过监听这个`<input>`元素的`onchange`事件来处理用户所选择的文件。在上述给定的代码示例中，我们首先设置了HTML文档的类型声明，并在`<head>`部分定义了页面的字符集为`gb2312`。接着，通过`<script>`标签嵌入了JavaScript代码。我们定义了一个名为`getFullPath`的函数，用于获取用户所选择的文件的完整路径。这个函数检查传入的对象`obj`是否有效，然后根据不同的浏览器类型返回不同的结果。在IE浏览器中，我们使用`document.selection.createRange().text`来获取路径，因为IE在处理`<input type="file">`时，文件路径会存储在`document.selection`对象中。对于Firefox浏览器，我们检查`obj.files`对象是否存在，如果存在，表示浏览器支持HTML5的File API。通过`obj.files.item(0).getAsDataURL()`获取文件的base64编码的URL，这是一种将文件编码成字符串的方法，方便在网页上直接显示图片。如果`obj.files`不存在，那么返回`obj.value`，这通常返回的是本地文件路径。在`<body>`部分，我们有一个文件输入框`<input type="file">`，并且为其绑定了`onchange`事件处理器。当用户改变选择的文件时，`onchange`事件被触发，此时会调用`getFullPath`函数，并将返回的路径设置到`<img>`标签的`src`属性上。这样，当用户选择文件后，图片就会显示在`<img>`标签中。需要注意的是，出于安全考虑，浏览器不允许直接获取文件的绝对路径。出于隐私和安全的考虑，浏览器限制了对文件系统的访问。因此，当我们在代码中提到“获取用户本地图片路径”时，实际上我们只能获取到文件的内容或者是文件的base64编码的URL，并不能获取文件的物理路径。这对于预览图片是足够的，但如果你的程序需要获取实际的文件路径，那么这在Web开发中通常是不可能的，除非使用特定的浏览器扩展或插件，并且得到用户的明确授权。在实际开发中，除了上述提到的IE和Firefox浏览器，还需要考虑到Chrome、Safari和其他现代浏览器。为了兼容所有浏览器，可以使用各种现代的前端框架和库，例如jQuery，来简化文件选择和图片预览的过程。同时，还需要注意最新的Web安全标准和浏览器策略，以确保网站的兼容性和用户的隐私安全。总结起来，上述代码通过JavaScript实现了一个简单的本地图片选择和预览功能，对于需要在网页上实现用户图片上传前预览的场景非常有用。它使用了HTML5的File API来处理文件，以及一些浏览器特定的技巧来适应不同环境。虽然代码很简单，但它包含了Web开发中关于文件上传、文件处理以及前端JavaScript编程的重要知识点。

这是一个用于匹配文件后缀名的正则表达式，它可以用于匹配 JavaScript、CSS、图片、Flash 等静态资源文件。在这个正则表达式中，使用了 `|` 符号表示或的关系，可以匹配多个后缀名。具体来说，它会匹配以 `.js`、`.css`、`.gif`、`.jpg`、`.jpeg`、`.png`、`.bmp`、`.swf`、`.flv`、`.html` 或 `.htm` 结尾的文件。

阅读全文

location ~ .*\.(js|css|gif|jpg|jpeg|png|bmp|swf|flv|html|htm)$

相关推荐

图片坐标查看*.gif;*.jpg;*.jpeg;*.bmp;*.jfif;*.png;

PyPI 官网下载 | IP2Location-8.6.2.tar.gz

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; error_log /dev/null; access_log /dev/null; } location ~ .*\.(js|css)?$ { expires 12h; error_log /dev/null; access_log /dev/null; }

location ~ .*\.(html|gif|jpg|png|bmp|swf|css|js)$

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$

location ~.*\.(gif|jpg|jpeg|png|bmg|swf|css)$

location ~ .*\.(js|css)?$ { expires 7d; access_log off; }

location ~ .*\.(js|css)?$ { add_header Cache-Control "max-age=604800, public"; expires 7d; access_log off; } 是什么意思

location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ { root /webroot/res/; }

nginx的location ~ .*.(?:htm|html)${root ydj; }转换为apache

nginx的location ~ .*.(?:htm|html)${root jimei-admin }转换为apache

nginx的location ~ .*\.(?:htm|html)$转换为apache

nginx的location ~ .*.(?:htm|html)${root jimei-admin expires -1; }转换为apache

listen 8081; server_name qq.huarui.mjava9; #设置编码格式 charset utf-8; # 正则表达式的访问 # 所有静态请求都由nginx处理，存放目录为myhrstatic location ~* \.(gif|jpg|jpeg|png|bmp|swf|css|js)$ { root myhrstatic;解释一下 }

location ~ \.(gif|jpg|jpeg|png|bmp|ico)$

nginx的location ~ .*.(?:htm|html)${root ydj expires -1;add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate"; }转换为apache

nginx的location ~ .*.(?:htm|html)${root jimei-admin expires -1;add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate"; }转换为apache

伪静态nginx的location ~ .*.(?:htm|html)${root ydj expires -1;add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate"; }转换为apache

最新推荐

js获取location.href的参数实例代码

2000-2021年中国科技统计年鉴（分省年度）面板数据集-最新更新.zip

PPT保护工具PDFeditor专业版-精心整理.zip

Spring Boot Docker 项目：含项目构建、镜像创建、应用部署及相关配置文件，容器化部署.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

"互动学习：行动中的多样性与论文攻读经历"

图片坐标查看.gif;.jpg;.jpeg;.bmp;.jfif;.png;

location ~ .\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; error_log /dev/null; access_log /dev/null; } location ~ .\.(js|css)?$ { expires 12h; error_log /dev/null; access_log /dev/null; }