js

最新推荐文章于 2025-06-15 18:50:32 发布

夏日千雪

最新推荐文章于 2025-06-15 18:50:32 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/beyondxiaohu15/article/details/81059870

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用onchange事件触发DOM操作，并演示了如何利用FileReader接口预览文件内容，包括创建DOM元素并设置属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

onchange事件
S(selector).change(function(){

});
例如：
$(document).ready(function(){
  $(".field").change(function(){
    $(this).css("background-color","#FFFFCC");
  });
});

$(obj).next().find('input[type="file"]').get(0).files[0];
.next()表示下一个  get(0)取得第1个   files[0]

FileReader预览：
<input type="file" id="file_input">
  <img src="" class="img" />

 $("input[type='file']").change(function(){   
 var file = this.files[0];
   if (window.FileReader) {    
            var reader = new FileReader();    
            reader.readAsDataURL(file);    
            //监听文件读取结束后事件    
          reader.onloadend = function (e) {
            $(".img").attr("src",e.target.result);    //e.target.result就是最后的路径地址
            };    
       } 
});

创建元素添加属性：var preview1 = document.createElement("img");               //创建img元素preview1.setAttribute("src", "/images/Default.png");          //给img元素赋值$('#addPicFile').append(preview1);                      //append  在#addPicFile之后添加img元素

function del() {
    var msg = "您真的确定要删除吗？\n\n请确认！";
    if (confirm(msg)==true){
        return true;
    }else{
        return false;
    }
}