첫 번째 프로젝트가 마침내 시작되었습니다. Qinqingchou라는 공공 복지 크라우드 펀딩 플랫폼입니다. WeChat, 컴퓨터 및 백엔드 인터페이스의 대부분이 저에게 완료되었습니다. 몇 달 후, 나는 많은 것을 얻었고 그것을 요약해야한다고 생각합니다.
가장 먼저 떠오르는 것은 이미지 업로드 문제입니다. 양식 데이터가 일반적으로 Ajax에 의해 업로드되면 형식을 사용하여 이미지를 업로드하는 것이 어리석은 느낌입니다. 그 당시 나는 jQuery Form 플러그인을 사용한다고 생각하지 않았습니다.
백그라운드에서 동료가 제공 한 솔루션은 Iframe에 양식 양식을 작성한 다음 이미지를 업로드 한 다음 양식을 자동으로 제출하는 것입니다. 그는 서버의 이미지 주소로 이동하여 페이지의 URL로 점프 할 것입니다.
해결책 1 : iframe+양식
<form action = "/user/uploadidcard.do"encType = "multipart/form-data"method = "post"> <input type = "file"id = "uploadpic"name = "file"> <label for = "uploadpic"id = "filebtn">+<img src = ""/> </label> </form> $ ( ". turnurl"). val (wind
이미지를 업로드 해야하는 인터페이스에 iframe을 소개하고 공공 도서관에서 iframe 메소드를 호출하고 이미지의 URL을 얻고 iframe에 이미지를 표시하십시오.
// iframe 함수 iframe (el) {var baseurl = "; var code, var code, var place = $ (el) [0] .contentWindow.location.search; console.log (place); if (place) {code = place.match (/code =/d+/) [0]. {filepath = place.match (/filepath =/s+/) [0] .Substr (9);} $ (el) .contents (). find ( ". tip"). css ( 'color', '#d0021b'); console.log (filepath); switch (code) {case "200": $ (el) 성공적으로 '); $ (el) .contents (). find ( ". tip"). css ('color ','#55a012 '); $ (el) .contents (). find ( "#filebtn> img"). attr ( "src", baseurl + "/" + filepath); return "/"case; "206".해결책 2 : 나중에이 접근법에 두 가지 문제가 있음을 발견했습니다. 하나는 사용자가 보낸 사진이 너무 커서 배경이 압축되지 않았다는 것입니다 (배경의 동료들은 너무 바빴습니다. 수용하기 위해서는 프론트 엔드에서 압축했습니다).
두 번째는 이미지 업로드가 성공한 후 이미지가 Iframe에 표시되며 특정 반응 시간이 필요하다는 것입니다. 때때로 사용자는 이미지를 업로드 할 수 없다고보고하지만 실제로는 배경이 아직 반환되지 않았다는 것입니다 ...
그래서 Base64를 사용하여 배경에 업로드하기로 결정했습니다.
<input type = "file"id = "uploadpic"name = "file"> <label for = "uploadpic"id = "filebtn">+<img src = ""/> </label> <span> 이미지를 업로드하십시오. 640*400 </span> <input type = "text"name = "turnurl"> <canvas id = "uploadimg"style = "display : none"> </canvas>
구조는 원래 구조와 비슷하지만 추가 캔버스가 있습니다.
$ ( "#uploadpic"). on ( 'change', function (event) {event.preventDefault (); console.log ($ (this) [0] .files); var file = $ (this) [0] .files [0]; if (file.size> 2097152) {alert ( "2m보다 upload 이미지가 retign"); (!/image /// w+/. test (file.type))) {alert ( "파일은 이미지!"); return; var reader = var reader (); reader.readasdataurl (file); reader.onload = function (e) {createcanvas (this.result);}); document.getElementById ( "uploadImg"); var cxt = cort = canvas.getContext ( '2d'); canvas.width = 640; canvas.height = 400; var img = new Image (); img.src = src; img.onload = function () {// var w = img.width; // img; // img; // img. canvas.width = w; // canvas.height = h; cxt.drawImage (img, 0, 0,640,400); // cxt.drawimage (img, 0, 0); $ ( ". showpic"). show (). attr ( 'src', canvas.todatake " "/front/uploadbybase64.do“:"post ", data : {"imgstr ": canvas.todataurl ("image/jpeg ", 0.9) .split ( ',') [1], 성공 : 함수 (data) {console.log (data); $ (". showpic ") data.url);}});}}첫째, 입력 파일의 정보를 사용하여 파일 크기 파일을 결정하고 파일이 이미지 파일인지 확인합니다.
2. 그런 다음 HTML5의 Filereader 인터페이스를 사용 하여이 이미지의 Base64 데이터를 얻습니다.
3.이베이스 64를 캔버스로 전달하고 그림의 SRC 역할을합니다. 현재 사진의 해상도 크기를 설정하여 업로드 된 사진에 통합 된 해상도가 있는지 확인할 수 있습니다. 물론 사진의 원래 크기를 기반으로 할 수도 있습니다.
4. Ajax 전에 처리 된 Base64 (사용자가 즉시 업로드 된 이미지를 볼 수 있도록)을 직접 표시 한 다음 Canvas.TodatAurl ( "Image/JPEG", 0.9) .Split ( ',')
5. 그런 다음 백그라운드에서 반환 된 URL을 이미지의 데이터 url 속성에 묶고 Ajax가 제출 될 때 데이터가 가능한 한 빨리 볼 수 있고 URL은 실제로 Ajax의 배경 과정에 있습니다.
PostScript : 두 솔루션 모두에 문제가있어 배경에 많은 중복 사진을 업로드합니다. 그러나 배경에있는 동료들은 이의가없는 것 같습니다.
실제 효과는이 http://www.qqchou.org/qqcweb/pages/photoiframe.html과 같습니다
위의 것은 프로젝트 실무, 이미지 업로드 양식 또는 Base64 프론트 엔드 이미지 압축 (프론트 엔드 이미지 압축)입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!