Первый проект наконец -то был запущен. Это краудфандинговая платформа общественного благосостояния под названием Qinqingchou. Большинство интерфейсов WeChat, компьютера и бэкэнд были завершены мной. Через несколько месяцев я чувствую, что я много получил, и я думаю, что мне нужно подвести итог.
Первое, что приходит на ум, - это проблема загрузки изображений. Когда данные формы обычно загружаются Ajax, кажется глупым использовать формы для загрузки изображений. Тогда в то время я не думал об использовании плагина формы jQuery.
Решение, данное коллегой в фоновом режиме, состоит в том, чтобы написать форму формы в 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><input type="text" name="turnUrl"></form> $ (". Turnurl"). val (window.location.pathname); $ ("#uploadpic"). On ('rade', function (event) {event.preventDefault (); $ ("form"). Opper ();});Введите iframe в интерфейсе, где нужно загрузить изображение, вызовите метод iframe в публичной библиотеке, получите URL -адрес изображения и отобразите изображение в iframe
// Извлеките путь в функцию iframe iframe (el) {var baseurl = ""; var code, filepath; var place = $ (el) [0] .contentwindow.location.search; console.log (place); if (place) {code.match (/code =/d+) [0] .substr (5); {filePath = place.match (/filePath =/s+/) [0] .substr (9);} $ (el) .contents (). Найти (". Tip"). CSS ('Color', '#D0021B'); Console.log (filePath); Switch (Code) {Case "200": $ (el). успешно '); $ (el) .contents (). Find (". Tip"). css (' color ','#55a012 '); $ (el) .contents (). Найти ("#filebt> img"). Show (). ATTR ("src", baseUrl + "/" + filePath); "206": $ (el) .contents (). Find (".".Решение 2: Позже я обнаружил, что с этим подходом было две проблемы. Одним из них было то, что изображения, отправленные пользователем, были слишком большими, и фон не сжимал их (коллеги на заднем плане были слишком заняты. Чтобы разместить их, мы сжали его на передней части).
Во -вторых, после успешной загрузки изображения изображение будет отображаться на iframe, что требует определенного времени реакции. Иногда пользователь сообщает, что изображение не может быть загружено, но на самом деле просто фон еще не вернулся ...
Поэтому я решил загрузить его на фон, используя base64
<input type = "file" id = "uploadpic" name = "file"> <label for = "uploadpic" id = "filebtn">+<img src = ""/> </label> <pan> Пожалуйста, загрузите изображение, размер в пределах 2m <br/> (тип изображения может быть Jpg, jepg, png, gif, bmp) <br/>. 640*400 </span> <input type = "text" name = "turrl"> <canvas id = "uploadimg" style = "Display: none"> </canvas>
Структура похожа на исходный, но есть дополнительный холст
$ ("#uploadpic"). on ('rade', function (event) {event.preventDefault (); console.log ($ (this) [0] .files); var file = $ (this) [0] .files [0]; if (file.size> 2097152) {alert ("пожалуйста, загрузите изображение меньше, чем 2m"); (!/Image /// W+/. Test (file.type)) {alert («Файл должен быть изображением!»); вернуть false;} var reader = new FileReader (); 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 (). ATTR ('src', canvas.todataurl ("Image/jpeg", '). 0.9)); $. Ajax ({url: «/front/uploadbybase64.do", type:« post », data: {" imgstr ": canvas.todataurl (" image/jpeg ", 0,9) .split (',') [1]}, успех: функция (данные). {console.log (data); $ (". Showpic"). Show (). attr ('Data-url', "/"+ data.url);}});}}1. Сначала используйте информацию о входном файле, чтобы определить файл размера файла.
2. Затем используйте интерфейс FileReader HTML5, чтобы получить данные BASE64 этого изображения.
3. Перейдите по этому базу64 в холст и служите SRC картинки. В настоящее время вы можете установить размер разрешения изображения, чтобы убедиться, что загруженные изображения имеют единое разрешение. Конечно, это также может быть основано на исходном размере картинки.
4. Перед Ajax непосредственно отобразить обработанную Base64 (так, чтобы пользователь мог немедленно увидеть загруженное изображение), а затем пройти Canvas.todataurl («Image/jpeg», 0,9) .split (',') [1] (тип - изображение/JPeg, вы можете использовать второй параметр для установки изображения) на соответствующий интерфейс на фоне фонегну
5. Затем свяжите URL-адрес, возвращенный в фоновом режиме с свойством изображения данных, и просто получите Data-url, когда Ajax отправлен, чтобы пользователь мог видеть его как можно быстрее, и URL на самом деле все еще находится в процессе Ajax на фоне.
PostScript: Есть проблема с обоими решениями, которые загружают много избыточных изображений на задний план. Но коллеги на заднем плане, кажется, не возражают.
Фактический эффект подобен этому http://www.qqchou.org/qqcweb/pages/photoiframe.html
Выше приведено практика проекта, форма формы загрузки изображений или сжатие фронтального изображения Base64 (сжатие изображений переднего показателя), представленное редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!