0

私はこのプラグインを使用しています：jQueryファイルのアップロード

私のHTML：

<input id="fileupload" type="file" name="files[]" data-url="upload.php" multiple>
        <script src="/js/vendor/jquery.ui.widget.js"></script>
        <script src="/js/jquery.iframe-transport.js"></script>
        <script src="/js/jquery.fileupload.js"></script>
        <script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
        <script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
        <script src="/js/jquery.fileupload-fp.js"></script>

        <div id="dropzone" class="fade well">Drop files here</div>

私のJS：

$(document).ready(function() {

                $('#fileupload').fileupload({
                    dataType: 'json',
                    dropZone: $('#dropzone'),
                    singleFileUploads: false,
                    add: function (e, data) {
                        $(this).fileupload('process', data).done(function () {
                            data.submit();
                        });
                    },
                    done: function (e, data) {
                        $.each(data.result, function (index, file) {
                            $('<p/>').text(file.name).appendTo(document.body);
                        });
                    },
                    process: [
                        {
                            action: 'load',
                            fileTypes: /^image\/(gif|jpeg|png)$/,
                            maxFileSize: 20000000 // 20MB
                        },
                        {
                            action: 'resize',
                            maxWidth: 1920,
                            maxHeight: 1080
                        },
                        {
                            action: 'save'
                        }
                    ]
                });
                $('#fileupload').bind('fileuploadsubmit', function (e, data) {
                    // The example input, doesn't have to be part of the upload form:
                    var GAL = $('#galleryId');
                    data.formData = {
                        galleryId: GAL.val(),
                        type: 'gallery',
                        entityId: 1
                    }
                    return true;
                });

                $(document).bind('dragover', function (e) {
                    var dropZone = $('#dropzone'),
                        timeout = window.dropZoneTimeout;
                    if (!timeout) {
                        dropZone.addClass('in');
                    } else {
                        clearTimeout(timeout);
                    }
                    if (e.target === dropZone[0]) {
                        dropZone.addClass('hover');
                    } else {
                        dropZone.removeClass('hover');
                    }
                    window.dropZoneTimeout = setTimeout(function () {
                        window.dropZoneTimeout = null;
                        dropZone.removeClass('in hover');
                    }, 100);
                });

                $(document).bind('drop dragover', function (e) {
                    e.preventDefault();
                });

}）;

私が達成したいこと：

  1. クライアント側での画像のサイズ変更
  2. 次に、追加のフォームデータ（データはサーバー側スクリプトに送信されません）を含む画像をupload.phpに送信します

よろしくお願いします。

4

2 に答える 2

2

Jquery ファイルのアップロードは、私の要求には適切な選択ではありません。Pluploadを正常に使用できるようになりました。

于 2012-12-18T10:39:35.577 に答える
0 
    <?php 

    //Define some variables  
          $dir = "choice_images/"; 
          $types = array("image/gif","image/jpeg","image/pjpeg","image/png","application/x-zip-compressed");  
    //Check to determine if the submit button has been pressed  
        if(isset($_POST['submit'])){  

    //Shorten Variables  
         $pollids = mysql_real_escape_string($_POST['pollid']);
         $choiceid= mysql_real_escape_string($_POST['chid']);   
         $tmp_name = $_FILES['realfile']['tmp_name'];  
         $new_name = $_FILES['realfile']['name'];
         if($new_name=="")
         {
             echo"<script>alert('Please choose file to upload');        
    </script>";

         }
     else {



    //Check MIME Type  
        if (in_array($_FILES['realfile']['type'], $types)){  


            $replacestring = str_replace(" ","_",$new_name);

         $img = time()."_".$replacestring;

         $datetime = date('m-d-Y');

//your codings

     //Move file from tmp dir to new location  
            move_uploaded_file($tmp_name,$dir . $img);  
            echo "{$_FILES['realfile']['name']} was uploaded sucessfully!";                                          
        }else{  
        //Print Error Message  
         echo "<small>File <strong><em>{$_FILES['realfile']['name']}</em></strong> Was Not Uploaded!</small><br />";  
        //Debug  
       $name =  $_FILES['realfile']['name'];  
       $type =    $_FILES['realfile']['type'];  
       $size =    $_FILES['realfile']['size'];  
       $tmp =     $_FILES['realfile']['name'];  
    //   echo "Name: $name<br/ >Type: $type<br />Size: $size<br />Tmp: $tmp";  
       echo"<script>alert('Please choose image file to upload. This is not a valid image file');       
    </script>";
        }  
        }
        }        
    else{        
    //    echo 'Could Not Upload Files';  
    }  

    ?>

これらのコーディングを使用して、完全な検証を行ってファイルをアップロードできます。画像のサイズ変更などの機能を追加する場合は、このコーディング内で可能です。

于 2012-11-21T10:09:53.160 に答える