文件上传并展示上传文件

1、问题背景

利用文件上传组件file，上传文件后并显示文件（图片）

2、实现源码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文件上传并展示文件路径</title><script type="text/javascript" src="../js/jquery-1.12.3.js" ></script><script>$(document).ready(function(){$("#fileUpload").off().on("change",function(){var fileUpload = $(this).val();var proUrl = window.location.protocol;var pageUrl = window.location.host;var path = proUrl + "//" +pageUrl + "/AngularJS/pages/";$("#uploadImg").attr("src",path+fileUpload);console.info(path+fileUpload);});});</script></head><body><div><input type="file" id="fileUpload" name="upload" /><br><br><img id="uploadImg" style="width: 200px; height: 200px;"></div></body>
</html>

3、实现结果

文件上传并展示上传文件相关推荐

jsp/html页面图片上传并展示上传的图片
之前做过一个项目,有一个功能是图片上传并且展示图片,尝试过其他的方法,但会有一个问题,那就是在IE8上图片并不能正常展示,所以便用以下方法来上传图片,很好的解决了此问题,步骤如下: 1.上传图片页面i ...
js使用input上传文件夹、拖拽上传文件夹并将文件夹结构展示为树形结构
一.实现效果左侧区域支持选择一个系统中的文件夹,或者将文件夹拖拽到这个区域进行上传,右侧区域可以将文件夹的结构展示为树形结构. 二.代码实现由于需要使用树形插件zTree,这个插件是依赖于jque ...
NodeJs实战-Express构建照片存储网站(2)-上传、展示文件
Express构建照片存储网站2-上传.展示文件静态资源显示图片 photo页面展示文件夹下的图片上传文件增加上传页面的路由增加提交接口的路由网站效果图项目地址上一节使用的静态数据存储的 ...
vue实现大文件分片上传断点续传并展示上传进度条
最近有一个上传视频到服务器的功能,然后发现视频太大了,比如1个G的视频文件基本都是上传失败的,我之前都是上传阿里云的,所以面对大文件上传服务器就做了分片上传和断点续传. 首先解释什么是分片上传:比如一 ...
SmartUpload上传下载及文件名和文件内容中文问题
一.安装篇 jspSmartUpload是由www.jspsmart.com网站开发的一个可免费使用的全功能的文件上传下载组件,适于嵌入执行上传下载操作的JSP文件中.该组件有以下几个特点: 1.使用 ...
vue 文件及描述信息一起上传_用Vue实现一个大文件上传和断点续传
前言这段时间面试官都挺忙的,频频出现在博客文章标题,虽然我不是特别想蹭热度,但是实在想不到好的标题了-.-,蹭蹭就蹭蹭 :) 事实上我在面试的时候确实被问到了这个问题,而且是一道在线 coding ...
python 实现统计ftp服务器指定目录下文件夹数目、文件数目及所有文件大小本次主要为满足应用方核对上传到ftp服务器的文件是否缺漏。主要要求：指定目录下，文件夹数目/文件数目/所有文件大小
python 实现统计ftp服务器指定目录下文件夹数目.文件数目及所有文件大小本次主要为满足应用方核对上传到ftp服务器的文件是否缺漏. 主要要求:指定目录下,文件夹数目/文件数目/所有文件大小,类 ...
jq上传file到php,jQuery文件上传
插件描述:这是一个文件上传的展示,看很多插件,并不满意就自己写了一个,可能兼容性不是很好,没有准确进行测试过,还请各位不吝赐教更新时间:2019/3/25 下午8:53:17 更新说明:修复上传成功 ...
java 上传文件及预览_SpringBoot上传下载文件及在线预览
SpringBoot上传下载文件及在线预览今天大概就说说如何使用SpringBoot进行上传和下载以及在线预览文件本篇主要介绍上传下载的功能,对于界面就简单一点,大致如下: 一.老规矩还是先看看小 ...

文件上传并展示上传文件

文件上传并展示上传文件相关推荐

最新文章

热门文章