图片和文件上传

Posted 2020-08-22 rnet

用于记录以供下次快速查阅

$(\'#fileImage\').change(function(e){
    e.stopPropagation();
    e.preventDefault();    
    var files=this.files;
    var imgSrc;
    if(files.length){
        if(files[0].type.indexOf("image") == 0) {
            if (files[0].size >= 512000) {
                alert(\'图片"\'+ files[0].name +\'"大于500k，请重新选择！\');    
                return;
            }
        } else {
            alert(\'文件"\' + files[0].name + \'"不是图片。\');
            return;
        }
          imgSrc=window.URL.createObjectURL(files[0]);
          $(\'#user-avatar-img\').attr(\'src\',imgSrc);
    }
});
$(\'#submitBtn\').on(\'click\',function(){
    var data=new FormData(document.forms.nameItem(\'uploadForm\'));
    //data.append(\'file\',file);  //添加或指定传递的对象
    var req=new XMLHttpRequest();
    req.open(\'POST\',\'http://url\',true);
    req.send(data);
})

FormData参考自：http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html

files对象：https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications