文章标题

web上传图片问题

1.web上传 构建基本的form表单，表单元素增加 enctype=”multipart/form-data”。

---

2.form表单需要
单图：<input type="file" id="img" name="img"> 。
多图 ：<input type="file" multiple id="img" name="img[]"> 。

---

3.提交图片
ajax提交： 基本的ajax提交的时候图片是不被包含的（需要提交图片的可以选择插件）。
ajax提交的项目域：
同一个项目不存在问题。
不同项目的时候，会有跨域的问题。不同项目处理上传的限制不一样的（最惨的一次教训）。

---

4.处理图片
h5处理图片成base64已服务器已base64处理图片:

    var _this = $(this)[0],            _file = _this.files[0],            fileType = _file.type;        if(/image\/\w+/.test(fileType)){            var fileReader = new FileReader();            fileReader.readAsDataURL(_file);            fileReader.onload = function(event){                var result = event.target.result;   //返回的dataURL                var image = new Image();                image.src = result;                image.onload = function(){  //创建一个image对象，给canvas绘制使用                    var cvs = document.createElement('canvas');                    var scale = 1;                    if(this.width > 1000 || this.height > 1000){  //1000只是示例，可以根据具体的要求去设定                        if(this.width > this.height){                            scale = 1000 / this.width;                        }else{                            scale = 1000 / this.height;                        }                    }                    cvs.width = this.width*scale;                    cvs.height = this.height*scale;     //计算等比缩小后图片宽高                    var ctx = cvs.getContext('2d');                    ctx.drawImage(this, 0, 0, cvs.width, cvs.height);                    var newImageData = cvs.toDataURL(fileType, 0.8);   //重新生成图片，<span style="font-family: Arial, Helvetica, sans-serif;">fileType为用户选择的图片类型</span>                    var imgObj = document.getElementsByClassName('personSetImgs');                    var sendData = newImageData.replace("data:"+fileType+";base64,",'');                    imgObj[0].src = newImageData;                    var formdata = new FormData();                    formdata.append("img", sendData);                    var xhr = new XMLHttpRequest();                    xhr.open("post", uploadUrl, true);                    xhr.onreadystatechange = function(){                        if(this.readyState == 4){                            var phone = document.getElementById('img');                            phone.value =this.responseText;                        }                    };                    xhr.send(formdata);                }            }        }else{            alert('请选择图片格式文件');        }