分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

flie文件上传图片预览

发布时间:2023-09-06 02:02责任编辑:赖小花关键词:上传图片文件上传

html代码如下

<div class="col-sm-10"> ????<input type="file" class="form-control shenfen" > ????<img class="shenfen_img" width="200" src=""> </div>

jq代码如下

<script> ?????$(function(){ ???????????$(".shenfen").on(‘change‘, function () { ?????????????????if (typeof (FileReader) != "undefined") { ?????????????????????????var img = $(this).siblings(".shenfen_img"); ?????????????????????????var reader = new FileReader(); ?????????????????????????reader.onload = function (e) { ???????????????????????????????img.attr("src",e.target.result) ?????????????????????????} ??????????????????????????reader.readAsDataURL($(this)[0].files[0]); ??????????????????} else { ??????????????????????????alert("你的浏览器不支持FileReader."); ??????????????????} ????????????}); ??????})</script> 

预览效果如下:

flie文件上传图片预览

原文地址:https://www.cnblogs.com/xiaokele1314/p/9264141.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved