javascript - remove - تحميل مكتبة jquery




تحميل jQuery Ajax (14)

نموذج تحميل بسيط

 <script>
   //form Submit
   $("form").submit(function(evt){	 
      evt.preventDefault();
      var formData = new FormData($(this)[0]);
   $.ajax({
       url: 'fileUpload',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
   });
   return false;
 });
</script>
<!--Upload Form-->
<form>
  <table>
    <tr>
      <td colspan="2">File Upload</td>
    </tr>
    <tr>
      <th>Select File </th>
      <td><input id="csv" name="csv" type="file" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="submit"/> 
      </td>
    </tr>
  </table>
</form>

هل يمكنني استخدام رمز jQuery التالي لأداء تحميل الملفات باستخدام طريقة النشر لطلب Ajax؟

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

إذا كان ذلك ممكنًا ، فهل أحتاج إلى ملء جزء "البيانات"؟ هل هي الطريقة الصحيحة؟ أنا فقط بنشر الملف إلى جانب الخادم.

لقد كنت غوغلينغ حول ، ولكن ما وجدته هو البرنامج المساعد في خطتي أنا لا أريد استخدامه. على الأقل في هذه اللحظة.


أنا متأخرة جدا لهذا لكنّني كنت أبحث عن حلّ تحميل صورة قائم على ajax والإجابة التي كنت أبحث عنها كانت مبعثرة في هذا المنصب. يحتوي الحل الأول الذي تمت تسويته على كائن FormData. جمعت شكلًا أساسيًا من الشفرة التي أعددتها معًا. يمكنك رؤيته يوضح كيفية إضافة حقل مخصص إلى النموذج مع fd.append () بالإضافة إلى كيفية التعامل مع بيانات الاستجابة عند الانتهاء من طلب ajax.

تحميل html:

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Select a file:</label><br>
        <input type="file" name="file" required />
        <input type="submit" value="Upload" />
    </form>
    <div id="output"></div>
</body>
</html>

إذا كنت تعمل مع php ، فهذه طريقة للتعامل مع التحميل الذي يتضمن استخدام كل من الحقول المخصصة الظاهرة في html أعلاه.

Upload.php

<?php
if ($_POST["label"]) {
    $label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("uploads/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "uploads/" . $filename);
            echo "Stored in: " . "uploads/" . $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>

تحميل AJAX ممكن بالفعل مع XMLHttpRequest (). ليست هناك ضرورة لإطارات iframe. يمكن إظهار تقدم التحميل.

للحصول على التفاصيل ، راجع: https://.com/a/4943774/873282 على السؤال عن تحميل ملف jQuery Progress وملف AJAX .


تحميل الملف غير ممكن من خلال اياكس. يمكنك تحميل الملف دون الحاجة إلى تحديث الصفحة باستخدام IFrame. يمكنك التحقق من مزيد من التفاصيل here

تحديث:

باستخدام XHR2 ، يتم دعم تحميل الملف عبر AJAX. على سبيل المثال ، من خلال كائن FormData ، ولكن للأسف لا تدعمها جميع المتصفحات القديمة.

يبدأ دعم FormData من اتباع إصدارات مستعرضات سطح المكتب. IE 10+ و Firefox 4.0+ و Chrome 7+ و Safari 5+ و Opera 12+

لمزيد من التفاصيل ، انظر الرابط MDN


لا يدعم Ajax عمليات تحميل الملفات ، يجب عليك استخدام iframe بدلاً من ذلك


لتحميل ملف يتم إرساله بواسطة المستخدم كجزء من النموذج باستخدام jquery ، يرجى اتباع الكود التالي:

var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);

ثم أرسل كائن بيانات النموذج إلى الخادم.

يمكننا أيضًا إلحاق ملف أو Blob مباشرةً إلى كائن FormData.

data.append("myfile", myBlob, "filename.txt");

لقد قمت بتطبيق عدة ملفات حددها مع معاينة فورية وتحميلها بعد إزالة الملفات غير المرغوب فيها من المعاينة عبر ajax.

يمكن العثور على الوثائق التفصيلية هنا: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html

العرض التوضيحي: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/

jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/

جافا سكريبت:

    $(document).ready(function(){
    $('form').submit(function(ev){
        $('.overlay').show();
        $(window).scrollTop(0);
        return upload_images_selected(ev, ev.target);
    })
})
function add_new_file_uploader(addBtn) {
    var currentRow = $(addBtn).parent().parent();
    var newRow = $(currentRow).clone();
    $(newRow).find('.previewImage, .imagePreviewTable').hide();
    $(newRow).find('.removeButton').show();
    $(newRow).find('table.imagePreviewTable').find('tr').remove();
    $(newRow).find('input.multipleImageFileInput').val('');
    $(addBtn).parent().parent().parent().append(newRow);
}

function remove_file_uploader(removeBtn) {
    $(removeBtn).parent().parent().remove();
}

function show_image_preview(file_selector) {
    //files selected using current file selector
    var files = file_selector.files;
    //Container of image previews
    var imageContainer = $(file_selector).next('table.imagePreviewTable');
    //Number of images selected
    var number_of_images = files.length;
    //Build image preview row
    var imagePreviewRow = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' +
        '<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' +
        '</tr> ');
    //Add image preview row
    $(imageContainer).html(imagePreviewRow);
    if (number_of_images > 1) {
        for (var i =1; i<number_of_images; i++) {
            /**
             *Generate class name of the respective image container appending index of selected images, 
             *sothat we can match images selected and the one which is previewed
             */
            var newImagePreviewRow = $(imagePreviewRow).clone().removeClass('imagePreviewRow_0').addClass('imagePreviewRow_'+i);
            $(newImagePreviewRow).find('input[type="button"]').attr('imageIndex', i);
            $(imageContainer).append(newImagePreviewRow);
        }
    }
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        /**
         * Allow only images
         */
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
          continue;
        }

        /**
         * Create an image dom object dynamically
         */
        var img = document.createElement("img");

        /**
         * Get preview area of the image
         */
        var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first');

        /**
         * Append preview of selected image to the corresponding container
         */
        preview.append(img); 

        /**
         * Set style of appended preview(Can be done via css also)
         */
        preview.find('img').addClass('previewImage').css({'max-width': '500px', 'max-height': '500px'});

        /**
         * Initialize file reader
         */
        var reader = new FileReader();
        /**
         * Onload event of file reader assign target image to the preview
         */
        reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
        /**
         * Initiate read
         */
        reader.readAsDataURL(file);
    }
    /**
     * Show preview
     */
    $(imageContainer).show();
}

function remove_selected_image(close_button)
{
    /**
     * Remove this image from preview
     */
    var imageIndex = $(close_button).attr('imageindex');
    $(close_button).parents('.imagePreviewRow_' + imageIndex).remove();
}

function upload_images_selected(event, formObj)
{
    event.preventDefault();
    //Get number of images
    var imageCount = $('.previewImage').length;
    //Get all multi select inputs
    var fileInputs = document.querySelectorAll('.multipleImageFileInput');
    //Url where the image is to be uploaded
    var url= "/upload-directory/";
    //Get number of inputs
    var number_of_inputs = $(fileInputs).length; 
    var inputCount = 0;

    //Iterate through each file selector input
    $(fileInputs).each(function(index, input){

        fileList = input.files;
        // Create a new FormData object.
        var formData = new FormData();
        //Extra parameters can be added to the form data object
        formData.append('bulk_upload', '1');
        formData.append('username', $('input[name="username"]').val());
        //Iterate throug each images selected by each file selector and find if the image is present in the preview
        for (var i = 0; i < fileList.length; i++) {
            if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0) {
                var file = fileList[i];
                // Check the file type.
                if (!file.type.match('image.*')) {
                    continue;
                }
                // Add the file to the request.
                formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name);
            }
        }
        // Set up the request.
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                var jsonResponse = JSON.parse(xhr.responseText);
                if (jsonResponse.status == 1) {
                    $(jsonResponse.file_info).each(function(){
                        //Iterate through response and find data corresponding to each file uploaded
                        var uploaded_file_name = this.original;
                        var saved_file_name = this.target;
                        var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />';
                        file_info_container.append(file_name_input);

                        imageCount--;
                    })
                    //Decrement count of inputs to find all images selected by all multi select are uploaded
                    number_of_inputs--;
                    if(number_of_inputs == 0) {
                        //All images selected by each file selector is uploaded
                        //Do necessary acteion post upload
                        $('.overlay').hide();
                    }
                } else {
                    if (typeof jsonResponse.error_field_name != 'undefined') {
                        //Do appropriate error action
                    } else {
                        alert(jsonResponse.message);
                    }
                    $('.overlay').hide();
                    event.preventDefault();
                    return false;
                }
            } else {
                /*alert('Something went wrong!');*/
                $('.overlay').hide();
                event.preventDefault();
            }
        };
        xhr.send(formData);
    })

    return false;
}

للحصول على كافة إدخالات النموذج ، بما في ذلك type = "file" تحتاج إلى استخدام كائن FormData . ستتمكن من رؤية محتوى formData في مصحح الأخطاء -> الشبكة -> الرؤوس بعد إرسال النموذج.

var url = "YOUR_URL";

var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);


$.ajax(url, {
    method: 'post',
    processData: false,
    contentType: false,
    data: formData
}).done(function(data){
    if (data.success){ 
        alert("Files uploaded");
    } else {
        alert("Error while uploading the files");
    }
}).fail(function(data){
    console.log(data);
    alert("Error while uploading the files");
});

نعم ، يمكنك فقط استخدام javascript للحصول على الملف ، والتأكد من قراءة الملف كعنوان URL للبيانات. قم بتحليل الاشياء قبل base64 للحصول فعليا على البيانات المشفرة 64 base ثم إذا كنت تستخدم php أو حقا أي لغة خلفية ، فيمكنك فك تشفير بيانات 64 base وحفظها في ملف كما هو موضح أدناه

Javascript:
var reader = new FileReader();
reader.onloadend = function ()
{
  dataToBeSent = reader.result.split("base64,")[1];
  $.post(url, {data:dataToBeSent});
}
reader.readAsDataURL(this.files[0]);


PHP:
    file_put_contents('my.pdf', base64_decode($_POST["data"]));

بالطبع سوف تحتاج إلى القيام ببعض التحقق مثل التحقق من نوع الملف الذي تتعامل معه وأشياء من هذا القبيل ولكن هذه هي الفكرة.


هنا كانت فكرة كنت أفكر في:

Have an iframe on page and have a referencer.

يكون لديك نموذج نقل INPUT: عنصر الملف إلى.

Form:  A processing page AND a target of the FRAME.

ستنشر النتيجة إلى الإطار ، وبعد ذلك يمكنك فقط إرسال البيانات التي تم جلبها إلى مستوى أعلى من علامة الصورة التي تريدها بشيء ما مثل:

data:image/png;base64,asdfasdfasdfasdfa

وتحميل الصفحة.

أعتقد أنه يعمل بالنسبة لي ، وبناءً على ذلك ، قد تتمكن من تنفيذ ما يلي:

.aftersubmit(function(){
    stopPropigation()// or some other code which would prevent a refresh.
});

يمكنك استخدام طريقة ajaxSubmit على النحو التالي :) عند تحديد ملف التي تحتاج إلى تحميل الخادم ، وإرسال النموذج إلى الخادم :)

$(document).ready(function () {
    var options = {
    target: '#output',   // target element(s) to be updated with server response
    timeout: 30000,
    error: function (jqXHR, textStatus) {
            $('#output').html('have any error');
            return false;
        }
    },
    success: afterSuccess,  // post-submit callback
    resetForm: true
            // reset the form after successful submit
};

$('#idOfInputFile').on('change', function () {
    $('#idOfForm').ajaxSubmit(options);
    // always return false to prevent standard browser submit and page navigation
    return false;
});
});

                 var dataform = new FormData($("#myform")[0]);

                    //console.log(dataform);
                     $.ajax({
                        url: 'url',
                        type: 'POST',
                        data: dataform,
                        async: false,
                        success: function (res) {
                            response data;
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });

<html>
    <head>
        <title>Ajax file upload</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function (e) {
            $("#uploadimage").on('submit', (function(e) {
            e.preventDefault();
                    $.ajax({
                    url: "upload.php", // Url to which the request is send
                            type: "POST", // Type of request to be send, called as method
                            data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                            contentType: false, // The content type used when sending data to the server.
                            cache: false, // To unable request pages to be cached
                            processData:false, // To send DOMDocument or non processed data file it is set to false
                            success: function(data)   // A function to be called if request succeeds
                            {
                            alert(data);
                            }
                    });
            }));
        </script>
    </head>
    <body>
        <div class="main">
            <h1>Ajax Image Upload</h1><br/>
            <hr>
            <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
                <div id="image_preview"><img id="previewing" src="noimage.png" /></div>
                <hr id="line">
                <div id="selectImage">
                    <label>Select Your Image</label><br/>
                    <input type="file" name="file" id="file" required />
                    <input type="submit" value="Upload" class="submit" />
                </div>
            </form>
        </div>
    </body>
</html>

  • استخدم iframe مخفيًا وقم بتعيين هدف النموذج على اسم iframe. بهذه الطريقة ، عند إرسال النموذج ، سيتم تحديث iframe فقط.
  • اطلب من معالج الأحداث الذي تم تسجيله لحدث تحميل iframe تحليل الاستجابة.

مزيد من التفاصيل حول مشاركة المدونة: http://blog.manki.in/2011/08/ajax-fie-upload.html .





file-upload