使用jquery怎么实现图片上传?

2021-02-04 17:00发布

表单中有一个上传控件,想实现图片上传效果,后台语言为node.js,前端为jquery,如何实现?

表单中有一个上传控件,想实现图片上传效果,后台语言为node.js,前端为jquery,如何实现?

4条回答
我自己打call
2楼 · 2021-02-05 09:10

当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦。
 一、原理

 

分为两步:

 

当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL);

 

把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。

 

在这里,我们需要了解Javascript里File对象、Blob对象和window.URL.createObjectURL()方法。

 

1、File对象

 

File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.

 

下面来看获取FileList对象:
 

     [removed][removed]          [removed]  $('#upload').change(function(){    // 获取FileList的第一个元素    alert(document.getelementbyid('upload').files[0]);  });  [removed]        

2、Blob对象

 

一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.

 

我们想要得到的对象URL实际上就是从Blob这个对象获取的,因为File的接口继承Blob。下面就来把Blob对象转换成URL:
 

     [removed]  var f = document.getelementbyid('upload').files[0];  var src = window.URL.createObjectURL(f);  document.getElementById('preview').src = src;  [removed]      

一个比较完整的实例
 

           HTML5 Upload        [removed][removed]  [removed]  //处理file input加载的图片文件  $(document).ready(function(e) {   //判断浏览器是否有FileReader接口   if(typeof FileReader =='undefined')   {    $("#destination").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验');   //如果浏览器是ie   if($.browser.msie===true)   {    //ie6直接用file input的value值本地预览    if($.browser.version==6)    {      $("#imgUpload").change(function(event){         //ie6下怎么做图片格式判断?      var src = event.target.value;      //var src = document.selection.createRange().text; //选中后 selection对象就产生了 这个对象只适合ie      var img = '';      $("#destination").empty().append(img);     });    }    //ie7,8使用滤镜本地预览    else if($.browser.version==7 || $.browser.version==8)    {    $("#imgUpload").change(function(event){      $(event.target).select();      var src = document.selection.createRange().text;      var dom = document.getElementById('destination');      //使用滤镜 成功率高      dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;      dom[removed] = '';      //使用和ie6相同的方式 设置src为绝对路径的方式 有些图片无法显示 效果没有使用滤镜好      /*var img = '';      $("#destination").empty().append(img);*/     });    }   }   //如果是不支持FileReader接口的低版本firefox 可以用getAsDataURL接口   else if($.browser.mozilla===true)   {    $("#imgUpload").change(function(event){    //firefox2.0没有event.target.files这个属性 就像ie6那样使用value值 但是firefox2.0不支持绝对路径嵌入图片 放弃firefox2.0    //firefox3.0开始具备event.target.files这个属性 并且开始支持getAsDataURL()这个接口 一直到firefox7.0结束 不过以后都可以用HTML5的FileReader接口了    if(event.target.files)    {     //console.log(event.target.files);     for(var i=0;i';      $("#destination").empty().append(img);     }    }    else    {     //console.log(event.target.value);     //$("#imgPreview").attr({'src':event.target.value});    }    });   }   }   else   {   // version 1   /*$("#imgUpload").change(function(e){    var file = e.target.files[0];    var fReader = new FileReader();    //console.log(fReader);    //console.log(file);    fReader.onload=(function(var_file)    {     return function(e)     {     $("#imgPreview").attr({'src':e.target.result,'alt':var_file.name});     }    })(file);    fReader.readAsDataURL(file);    });*/        //单图上传 version 2     /*$("#imgUpload").change(function(e){      var file = e.target.files[0];      var reader = new FileReader();     reader.onload = function(e){     //displayImage($('bd'),e.target.result);     //alert('load');     $("#imgPreview").attr({'src':e.target.result});    }    reader.readAsDataURL(file);     });*/    //多图上传 input file控件里指定multiple属性 e.target是dom类型     $("#imgUpload").change(function(e){       for(var i=0;i';      $("#destination").empty().append(img);     }      }     });         //处理图片拖拽的代码    var destDom = document.getElementById('destination');    destDom.addEventListener('dragover',function(event){     event.stopPropagation();     event.preventDefault();     },false);         destDom.addEventListener('drop',function(event){     event.stopPropagation();     event.preventDefault();     var img_file = event.dataTransfer.files.item(0);  //获取拖拽过来的文件信息 暂时取一个     //console.log(event.dataTransfer.files.item(0).type);     if(!(/^image/.*$/.test(img_file.type)))     {     alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件');     return false;     }     fReader = new FileReader();     fReader.readAsDataURL(img_file);     fReader.onload = function(event){     destDom[removed]='';     destDom[removed] = '';      };    },false);   }  });  [removed]            

         

二、兼容性

     •上述方法适用于chrome浏览器    •如果是IE浏览器可以直接使用input的value来代替src    •网上查看资料有直接使用File对象的getAsDataURL()方法获取URL的,现在这个方法都已经废除,类似的还有getAsText()和getAsBinary()方法;    


梵梵
3楼 · 2021-02-05 09:28
  1. jsp如下:

  <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>





    
    
    [removed][removed]
    [removed][removed]


[removed]


    function add() {
        var formData = new FormData();
        formData.append('file', $('#fileId')[0].files[0]);  //添加图片信息的参数
        formData.append("name", $("#name").val());
        formData.append("szm", $("#szm").val());
        $.ajax({
            url: "add",
            type: "post",
            dataType: "json",
            cache: false,
            data: formData,
            processData: false,// 不处理数据
            contentType: false, // 不设置内容类型
            success: function (data) {
                alert("添加成功");
                [removed] = "list";
            }
        })

    }

[removed]



<%----%>
    
        
            
            
        
        
            
            
        
        
            
            
        
        
            
        
    
名称
首字母
图片
                添加             
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. 后端代码,如下:

    /**
     * 添加
     */
    @RequestMapping("add")
    @ResponseBody
    public String add(Zks zks, MultipartFile file) {
        zks.setLogo(Upload.upload(file));
        zksDao.add(zks);
        return "ok";
    }


大冬瓜
4楼 · 2021-02-05 10:11
上传头像[removed]function uploadImg() {    debugger;    if($("#file").val() != "") {
        $.ajaxFileUpload({
            type: "POST",
            url:"/selfsuperXXXXX/uploadFile",//后台接口            dataType: "json",
            fileElementId:"file",  // 文件的id            success: function(d){                if(d.code == 0) {
                    js.showMessage("上传成功");                    //图片显示                    $("#avatar").attr("value",d.data.url);
                    $("#avatarShow").attr("src",d.data.url);
                }
            },
            error: function () {
                js.showMessage("上传失败");
            },
        });
    } else {
        js.showMessage("请先选择文件");
    }
}[removed]


小小李兆佳
5楼 · 2021-02-07 09:22
上传头像[removed]function uploadImg() {    debugger;    if($("#file").val() != "") {
        $.ajaxFileUpload({
            type: "POST",
            url:"/selfsuperXXXXX/uploadFile",//后台接口            dataType: "json",
            fileElementId:"file",  // 文件的id            success: function(d){                if(d.code == 0) {
                    js.showMessage("上传成功");                    //图片显示                    $("#avatar").attr("value",d.data.url);
                    $("#avatarShow").attr("src",d.data.url);
                }
            },
            error: function () {
                js.showMessage("上传失败");
            },
        });
    } else {
        js.showMessage("请先选择文件");
    }
}[removed]


相关问题推荐

  • 回答 2

    1. jQuery 里面有很多东西是出于兼容性,历史遗留。比如 .ready() 之类的函数,为什么会很scroll 有关,那是为了兼容某些ie。这种代码对于编程思想来说不仅没用,而且是杂音,你要筛选出来就得了解这段代码的变动,费心费力得不偿失。2. jQuery 里面的代码不...

  • 回答 7
    已采纳

    总结回顾一下jQuery的发展历史,它经历了三个时代:1、jQuery为王的世代。一扫DOJO、Mootools、Prototype等竞争对手,成为前端必备技能。要实现一个功能,首先想到是否有成熟的jQuery Plugin可用。2、jQuery和Angularjs、Bootstrap共存的时代。Angularjs内置...

  • 回答 6
    已采纳

    一般是这样的,学习jQuery之前应该是先要学习JavaScript的,因为jQuery是JavaScript的一个类库,所以学习了JavaScript一些知识才能更好的理解jQuery。首先说一下JavaScript和jQuery的联系和区别吧。简单的说jQuery是JavaScript的一个类库,通俗的说就是jQuery...

  • 回答 6

    最接近替代品的当然是Zepto。不过如果你没有legacy的代码要维护,又只需要支持green browsers,可以考虑完全用标准api。

  • 回答 9

    jQuery是库,不是框架。库只管引进来使用,除了库接口,没有其他约束,随便怎么用,free style。而框架则有着各种各样的严格约束。

  • 回答 6

    id、name、class这三种会了就行了,后面在实践中慢慢学习吧。。不过现在纯前端好像都不咋用jquery了

  • 回答 4
    已采纳

    jq是个js的类库,里面的设计思想非常不错。但是,你假如是个新手,建议你会调用jq的api就行了。jq简化了dom的一些操作,做了一些兼容的代码,让你写得更流畅。等你成了前端大神,js玩得非常6的时候,假如有闲情逸致,可以回来看看jq这个老朋友的源码。jq使用...

  • 回答 6

    前端技术每年都会不断更新,一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,前端技术工程师缺口非常大。技术的发展规律其实,技术的发展趋势就是追求更高的复用性,更简便的业务代码写法,所以最终都会要求跨平台、都会彻底分离非业务逻辑。j...

  • 回答 4

    *{undefinedmargin:0px;padding:0px;}.main{undefinedcursor:pointer;}.list{undefinedborder:1px solid black;display:none;}.list li{undefinedcursor:pointer;border:1px solid red;list-style:none;}#noPopEvent...

  • 回答 5

    文档过一遍,感觉理解了写一个todolist,然后把react-router文档过一遍,写一个todolist,最后把redux文档看一遍,写一个todolist。这样下来,react全家桶基本理解了

  • 回答 3

    有一定影响,而且不仅对蜘蛛,如果用户浏览器把js禁用的话也显示不了

  • 回答 5

    国外还有 Amazon, 全球最大的电子商务网站。还有微软,很多很多。

  • 回答 4

    前端框架的vue.js,angular.js,可视化工具d3.js,移动端:zepto等

没有解决我的问题,去提问