jquery 上传图片原理

jQuery是一款非常流行的JavaScript框架，它不仅简化了JavaScript的操作，还提供了很多实用的功能。其中，jQuery也提供了一种方便的方法来上传图片。下面我们就来看一下jQuery上传图片的原理。

$(function(){
  //给input添加change事件
  $('input[type="file"]').change(function(){
    //获取当前选择的图片
    var file = this.files[0];
    //使用FileReader对象读取图片
    var reader = new FileReader();
    reader.onload = function(event){
      //将图片数据作为参数传递给服务器端
      $.post('/upload',{'image':event.target.result},function(data){
        //上传成功后的处理
        console.log(data);
      })
    }
    reader.readAsDataURL(file);
  })
})

在上面的代码中，首先使用jQuery的document.ready()函数来执行代码。当document对象加载完成后，会执行函数中的代码。

接着，使用jQuery选择器选择input标签中的type属性为file的元素，并给它绑定一个change事件。这里的change事件表示当input中的文件被选择后，会触发这个事件。

在事件的处理函数中，我们使用了HTML5提供的FileReader对象，它能够读取当前选择的文件。在读取图片数据之后，我们使用jQuery的post()函数将图片数据作为参数传递给服务器端。服务器端将接收到的图片数据文件存储到相应目录下，并将上传后的图片路径等信息返回给客户端。最后我们可以在上传成功后的处理代码中处理返回的数据。

以上就是jQuery上传图片的基本原理，通过这种方式，我们能够方便地上传图片到服务器端，实现图片的添加、修改和删除等操作。