最初のプロジェクトがついに開始されました。 Qinqingchouと呼ばれる公共の福祉クラウドファンディングプラットフォームです。 WeChat、コンピューター、バックエンドのインターフェイスのほとんどは、私によって完了しました。数ヶ月後、私は多くのことを得たと感じており、それを要約する必要があると思います。
最初に思い浮かぶのは、画像をアップロードする問題です。通常、フォームデータがAjaxによってアップロードされる場合、フォームフォームを使用して画像をアップロードするのは愚かだと感じます。それからその時、私はjQueryフォームプラグインを使用することを考えていませんでした。
バックグラウンドで同僚から与えられたソリューションは、フォームをiframeに書いてから、画像をアップロードしてフォームを自動的に送信することです。彼は、サーバー上の画像のアドレスにページのURLにジャンプし、私はそれを傍受します。
ソリューション1：iframe+フォームフォーム
<form Action = "/user/uploadIdcard.do" enctype = "multipart/form-data" method = "post"> <input type = "file" = "uploadpic" name = "file"> <label for = "uploadpic" = "filebtn"> "filebtn">+<img src = "/> </label> <inpun $（ "。turnurl"）。val（window.location.pathname）; $（ "＃uploadpic"）。
画像をアップロードする必要があるインターフェイスにiframeを紹介し、公共図書館のiframeメソッドを呼び出し、画像のURLを取得し、iframeに画像を表示します
// iframe関数のパスを抽出iframe（el）{var baseurl = ""; 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）; resculy '）; $（el）.contents（）。 "206"：$（el）.contents（）。find（ "。tip"）。テキスト（ 'ファイルが大きすぎる'）; break; case "207"：$（el）.contents（）。find（ "。tip"）。ソリューション2：後で、このアプローチに2つの問題があることがわかりました。 1つは、ユーザーから送信された写真が大きすぎて背景がそれを圧縮しなかったことです（背景の同僚は忙しすぎました。それらを収容するには、フロントエンドでそれを圧縮しました）。
2つ目は、画像のアップロードが成功した後、画像がIFRAMEに表示され、特定の反応時間が必要なことです。ユーザーは、画像をアップロードできないと報告する場合がありますが、実際には背景がまだ返されていないということです...
そこで、base64を使用してバックグラウンドにアップロードすることにしました
<入力タイプ= "ファイル" id = "uploadpic" name = "file"> <label for = "uploadpic" "uploadpic" = "filebtn">+<img src = ""/> </label> <span>画像をアップロードしてください。 640*400 </span> <入力型= "text" name = "turnurl"> <canvas id = "uploadimg" style = "display：none"> </canvas>
構造は元の構造に似ていますが、余分なキャンバスがあります
$（ "＃uploadpic"） （！/image /// test（file.type））{alert（ "fileはimage！"）; return false;} var reader = new fileReader（）; reader.readasdataurl（）; reader.readasdataurl（file）; reader.onload = function（e）{createcanvas（this.result）;}）; document.getElementById（ "uploadimg"）; var cxt = canvas.getContext（ '2d'）; canvas.width = 640; canvas.height = 400; var img = new image（）; img.src = src; img.onload = function（）{// var w = img.width; /////////// canvas.width = w; // canvas.height = h; cxt.drawimage（img、0、0,640,400）; // cxt.drawimage（img、0、0）; $（ "。showpic"）。show（）。 0.9））; $。ajax（{url： "/front/uploadbybase64.do"、" post "、data：{" imgstr "：canvas.todataurl（" image/jpeg "、0.9）.split（ '、'）[1]}、成功：機能（データ） {console.log（data）; $（ "。showpic"）。show（）。attr（ 'data-url'、 "/"+ data.url）;}}1.最初に、入力ファイルの情報を使用して、ファイルサイズファイルを決定します。
2.次に、HTML5のFileReaderインターフェイスを使用して、この画像のbase64データを取得します。
3.このbase64をキャンバスに渡し、写真のSRCとして機能します。この時点で、画像の解像度サイズを設定して、アップロードされた画像に統一された解像度があることを確認できます。もちろん、写真の元のサイズにも基づいている場合があります。
4。AJAXの前に、処理されたbase64を直接表示し（ユーザーがアップロードされた画像をすぐに見ることができるように）、canvas.todataurl（ "image/jpeg"、0.9）.split（ '、'）[1]（画像/jpegです。
5.次に、URLをバックグラウンドで返したURLを画像のData-URLプロパティに結び、Ajaxが送信されたときにData-URLを取得して、ユーザーが可能な限り速く表示できるようにし、URLは実際にAjaxのプロセスにあるようにします。
postScript：両方のソリューションに問題があり、バックグラウンドに多くの冗長な写真をアップロードします。しかし、バックグラウンドの同僚は異議を唱えていないようです。
実際の効果は、このhttp://www.qqchou.org/qqcweb/pages/photoiframe.htmlのようなものです
上記は、エディターが導入したプロジェクトの練習、画像アップロードフォーム、またはBase64フロントエンド画像圧縮（フロントエンド画像圧縮）です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！