ajax 无刷新预览上传图片
博客专区 > tystys 的博客 > 博客详情
ajax 无刷新预览上传图片
tystys 发表于10个月前
ajax 无刷新预览上传图片
  • 发表于 10个月前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

ajax 无刷新预览上传图片

 

代码

<form method="post" action="{:U('Index/uploade')}" enctype="multipart/form-data" id="uploadForm">
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" value="Upload"/>
    </form>
     <script type="text/javascript" src="__JS__/jquery-2.1.3.min.js"></script>
       
     <script>
     
     $("#file").change(function () {
                filePreview(this);
        });
        
        
    function filePreview(input) {
        if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#uploadForm + img').remove();
            $('#uploadForm').after('<img src="'+e.target.result+'" width="450" height="300"/>');
        }
        reader.readAsDataURL(input.files[0]);
    }
}
     </script>

 

 

共有 人打赏支持
粉丝 3
博文 72
码字总数 82272
×
tystys
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: