Подтвердить файл filetype/filesize, обрезать, изменить размер и затем загрузить

Ответ 1

Мир вам, брат,

Я использую то, что вы хотите в моем проекте, но нет (измените размер фотографии, когда я поставлю собственный размер для изображений)

i используя (imgareaselect) для обрезки фотографии

но я не помню его сайт, возможно: http://odyniec.net/projects/imgareaselect/examples.html

Если это сайт правильно, я использую этот код

   var x1 = null, y1 = null, w = null, h = null, Signal = null, object=null;

   function preview(img, selection) {
    var img = {
        url: jQuery("#image").attr("src"),
        width: jQuery("#image").width(),
        height: jQuery("#image").height()
    }

    var scaleX = 128 / selection.width;  // 128 = my custom size ;)
    var scaleY = 128 / selection.height; 
    $(".avatar-box img").replaceWith('<img id="thumbnail" src="'+img.url+'" class="preview" border="0"/>');


    $('#thumbnail').css({ 
      width: Math.round(scaleX * img.width) + 'px', 
      height: Math.round(scaleY * img.height) + 'px',
      marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
      marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
    });

    x1 = selection.x1; y1 = selection.y1; w = selection.width; h = selection.height;
   }
$(window).ready(function () {
 $('#image').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});

и проверить размер и тип: я также использую этот script

   $("form").submit(function(){
     var OrgFile = $(this).find("[type=file]"),
         FileName = OrgFile.val(),
         FileExtension = FileName.split('.').pop().toLowerCase();
         if(FileName.indexOf(".")==-1 || FileExtension != "jpg" && FileExtension != "jpeg" && FileExtension != "png" && FileExtension != "gif" ){ // Curstom File Extension
          alert("This isn't a Photo !");
          return false;
         }else
         if((OrgFile[0].files[0].size/1024/1024) > (1)){ // Max Photo Size 1MB
          alert("You Photo is too big !");
          return false;
         }else{
          alert("every thing Fine :)");
          return true;
         }
   });

Затем, если клиент отправляет обрезанное изображение

  $('#create_thumbnail').submit(function() {
    $.ajax({
     type : "POST",
     url : "resize.php",
     data : {logged_code: logged_code,x1: x1,y1: y1,w: w,h: h},
     success: function(data) {}
    });
    return false;
  });

И файл resize.php

    function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
        list($imagewidth, $imageheight, $imageType) = getimagesize($image);
        $imageType = image_type_to_mime_type($imageType);
        $newImageWidth = ceil($width * $scale);
        $newImageHeight = ceil($height * $scale);
        $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
        switch($imageType) {
            case "image/gif":
                $source=imagecreatefromgif($image); 
                break;
            case "image/pjpeg":
            case "image/jpeg":
            case "image/jpg":
                $source=imagecreatefromjpeg($image); 
                break;
           case "image/png":
            case "image/x-png":
                imagealphablending($newImage, false);
                imagesavealpha($newImage, true);  
                $source=imagecreatefrompng($image); 
                break;
        }
        imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
        switch($imageType) {
            case "image/gif":
                imagegif($newImage,$thumb_image_name); 
                break;
            case "image/pjpeg":
            case "image/jpeg":
            case "image/jpg":
                imagejpeg($newImage,$thumb_image_name,100); 
                break;
            case "image/png":
            case "image/x-png":
                imagepng($newImage,$thumb_image_name);  
                break;
      }
        chmod($thumb_image_name, 0777);
        return $thumb_image_name;
    }

Надеюсь, что я помогу вам и пойму ваш вопрос,

пожалуйста, вопте мой ответ, что я хочу присоединиться к чат-чату php, чтобы найти одну помощь мне в проблеме

извините за мой плохой английский, я говорю арабский

Ответ 2

Изменение размера может быть выполнено с помощью FileReader и холста. Создайте холст с желаемым размером.

Загрузите изображение. Затем используйте canvas.toDataURL(fileType), чтобы получить содержимое файла как base64

Ответ 3

Попробуйте использовать Fine Uploader для проверки и загрузки на стороне клиента; с JCrop для обрезки изображения впоследствии.

Прекрасный загрузчик отлично подходит для ограничения размера и типа файла (см. здесь) на стороне клиента; однако он зависит от того, какие браузеры вам нужно поддерживать (я считаю, что IE7 не позволит вам проверять на стороне клиента, как это).

В то время как JCrop - это простой инструмент для обрезки, который поддерживает пропорции и конвертирует изображения между их дисплеем и фактическими размерами.

Ответ 4

Здесь есть несколько отдельных вещей:

• Проверка типа изображения/файла. Это можно сделать на стороне клиента, но вам нужно будет снова сделать это на сервере для обеспечения безопасности. Для ввода файла, который принимает только изображения, вы можете использовать:

  <input type="file" accept='image/*'>
  

• Позволяет пользователю обрезать изображение. Здесь есть несколько библиотек, наиболее заметным из которых является Jcrop. Но есть альтернативы, такие как imgareaselect, jqCrop и jquery-cropbox (я создал и поддерживаю jquery-cropbox). См. Здесь очень минимальный пример того, как вы можете начать работу с одной или двумя строками jquery.

http://acornejo.github.io/jquery-cropbox/

• Выполнение фактического обрезания на клиенте. Это требует HTML5, и поэтому не будет работать со старой версией Internet Explorer. В частности, вам понадобится холст api и, возможно, файл api (чтобы обслуживать файлы). jquery-cropbox также может сделать это для вас с помощью методов getBlob и getDataURL. Если вы хотите сделать это вручную, посмотрите здесь:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

• Загрузка изображения. Существует множество сценариев для загрузки изображений, сделайте выбор. Если вы используете jquery-cropbox, вы можете использовать jquery для обработки загрузки на ваш сервер, как это (для загрузки данных сгенерированных клиентом данных, подобных этому, также потребуется браузер, совместимый с HTML5).

  var blob = $('#yourimage').data('cropbox').getBlob();
  var fd = new FormData();
  fd.append('file', blob);
  
  $.ajax({
      type: 'POST',
      url: 'http://yourwebsite.com/handle_uploads',
      data: fd,
      cache: false,
      contentType: false,
      processData: false,
      success: function(data){
        alert('upload succeeded');
      },
      error: function () {
        alert('upload failed');
      }
  });
  

  },

Ответ 5

Для проверки размера файла на стороне клиента используйте следующее:

<script type="text/javascript">
    $('#image-file').bind('change', function() {
        alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
    });
</script>

Если вам нужен тип плагина для всего проекта, вы можете посмотреть this.

Если вы ищете несколько пользователей, воспользуйтесь этим.

Ответ 6

jQuery Код Ajax

jQuery('document').ready(function(){

    var input = document.getElementById("imagefile");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }

    input.addEventListener("change", function (evt) {

        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            //validation to check whether uploaded files are images
            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) { 
                    };
                    reader.readAsDataURL(file);
                }


                if (formdata) {
                    //send the ajax query to upload the file(s)
                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (result) {
                            jQuery('div#response').html("Successfully uploaded").fadeOut();
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }   
        }

    }, false);


});

Код HTML

<form enctype="multipart/form-data">
<input id="imagefile" type="file" name="image" accept="image/*"/ />
</form>

Что выше будет для вас, так это то, что после того, как вы загрузите файл (ы), он будет первым проверять тип изображения и загружать его через ajax для вас. Вы можете сделать несколько загрузок файлов, если вам нужно. Если вы когда-нибудь задавались вопросом, что делает FormData,

Объект FormData позволяет скомпилировать набор пар ключ/значение для отправьте с помощью XMLHttpRequest. Его в первую очередь предназначено для использования при отправке формы, но могут использоваться независимо от форм для того, чтобы передавать переданные данные. Переданные данные находятся в том же формате, что и метод submit() будет использовать для отправки данных, если форма тип кодирования был установлен в "multipart/form-data".

Что делает addEventListener для вас,

addEventListener() регистрирует один прослушиватель событий на одном цель. Целевой объект может быть единственным элементом в документе, сам документ, окно или XMLHttpRequest.

Вы можете использовать upload.php для загрузки файла (ов) на уровне сервера.

Если вы хотите иметь эту функциональность в плагине, вы можете расширить плагин с помощью вышеуказанного кода, и он не будет блокировать ваш плагин, потому что это очень простой фрагмент кода, который выполняет эту работу. Я успешно интегрировал код в плагин без каких-либо проблем.

эта ссылка покажет вам, как проверить размер файла. Проверка размера загрузки файла JavaScript

Изменить размер, чтобы он соответствовал определенным параметрам Изменение размера javascript

Как пропорционально изменить пропорции/сохранить пропорции?

Эта ссылка должна помочь вам. Я не собираюсь интегрировать все в один, поскольку для поддержания простоты кода, чтобы вы могли легко понять.

Если у вас есть какие-либо вопросы, дайте мне знать.

Ответ 7

Пожалуйста, посмотрите эту библиотеку

и это страница документации где вы можете установить максимальные значения размера,

<maxwidth>800</maxwidth>
<maxheight>500</maxheight>
<minwidth>100</minwidth>
<minheight>70</minheight>  

Ответ 8

Что касается типа и размера файла:

var fileUpload = $(':file[id="fileUploadId"]');
var fileName = $(fileUpload).val();
// Checking type:
if(fileName.indexOf('.jpg') || fileName.indexOf('.gif')){/* Accepted types */}

// Check size
if($(fileUpload).size() <= yourAcceptedSize) {/* Accepted size */}   

Ответ 9

У меня есть идея. Вы можете попробовать использовать этот плагин для загрузки.

http://des.delestesoft.com:8080/?go=2

когда вы определяете атрибуты: post variables →

variables:{
            sessionID:"abcdefg",
            width:$("#myimage").width(),
            height:$("#myimage").heigth()
        },

на стороне сервера: вы получаете файл и изменяете размер изображения в соответствии с пост-переменными.