帶有codeigniter的Blueimp jQuery-File-Upload上傳並重命名圖像並調整其大小

Question

我已經搜索並嘗試了很多天，我正在使用

Blueimp jQuery-文件上傳

對於使用codeigniter上傳多個文件，我對使用它的某些方面有疑問：

1. 如何重新命名序列為15_1.jpg / 15_2.jpg / 15_3.jpg類的上傳文件
2. 如何使用相同的表單提交兩次，第一次提交上傳，然后第二次提交將一些輸入插入數據庫。
3. 上傳前如何調整圖像大小

Answer 1

1）重命名而不是

move_uploaded_file($_FILES["file"]["tmp_name"], "../img/imageDirectory/" . $_FILES["file"]["name"]);

做這個，

$temp = explode(".", $_FILES["file"]["name"]);
$newfilename = round(microtime(true)) . '.' . end($temp);
move_uploaded_file($_FILES["file"]["tmp_name"], "../img/imageDirectory/" . $newfilename);

會根據當前時間產生一個隨機數，並附加原始上傳文件的擴展名。

2）要使用相同的表格進行上傳和插入，您需要兩個按鈕

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

類似地，插入創建另一個函數並調用它。

3）在上載之前調整圖像大小？..它們使您可以調整客戶端圖像的大小，您需要包括以下腳本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>

然后，您所需要做的就是將選項disableImageResize設置為false。 默認情況下，圖像會調整為FullHD（1920x1080），但是您可以定義自己的選項：

$('#fileupload').fileupload({
    url: '//jquery-file-upload.appspot.com/',
    dataType: 'json',
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
    disableImageResize: /Android(?!.*Chrome)|Opera/
        .test(window.navigator && navigator.userAgent),
    imageMaxWidth: 800,
    imageMaxHeight: 800,
    imageCrop: true // Force cropped images
})