Maison > Article > interface Web > 文件上传并展示上传文件
文件上传并展示上传文件
- 黄舟original
- 2017-02-18 13:17:291347parcourir
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>
<p>
<input type="file" id="fileUpload" name="upload" /><br><br>
<img id="uploadImg" style="width: 200px; height: 200px;">
</p>
</body>
</html>
3、实现结果
以上就是文件上传并展示上传文件的内容，更多相关内容请关注PHP中文网（www.php.cn）！
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：AngularJS之ng-if指令Article suivant：AngularJS之表格