JQuery සමඟ අසමමුහුර්තව ගොනුවක් උඩුගත කිරීමට මම කැමතියි.

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

ගොනුව උඩුගත කරනවා වෙනුවට මට ලැබෙන්නේ ගොනු නාමය පමණි. මෙම ගැටළුව විසඳීමට මට කුමක් කළ හැකිද?

HTML5 සමඟ ඔබට අජැක්ස් සහ jQuery සමඟ ගොනු උඩුගත කළ හැකිය. එපමණක් නොව, ඔබට ගොනු වලංගු කිරීම් (නම, ප්‍රමාණය සහ MIME වර්ගය) හෝ HTML5 ප්‍රගති ටැගය (හෝ div) සමඟ ප්‍රගති සිදුවීම හැසිරවිය හැකිය. මෑතකදී මට ගොනු උඩුගත කරන්නෙකු සෑදීමට සිදු විය, නමුත් මට ෆ්ලෑෂ් භාවිතා කිරීමට අවශ්‍ය නොවීය හෝ අයිෆ්‍රේම් හෝ ප්ලගීන නොවූ අතර සමහර පර්යේෂණ වලින් පසුව මම විසඳුම ඉදිරිපත් කළෙමි.

HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

පළමුව, ඔබට අවශ්‍ය නම් යම් වලංගු භාවයක් කළ හැකිය. උදාහරණයක් ලෙස, .on('change')ගොනුවේ සිදුවීමේදී:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

දැන් $.ajax()බොත්තම ක්ලික් කිරීම සමඟ ඉදිරිපත් කරන්න:

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

ඔබට පෙනෙන පරිදි, HTML5 (සහ සමහර පර්යේෂණ) සමඟ ගොනු උඩුගත කිරීම කළ හැකි පමණක් නොව ඉතා පහසු වේ. උදාහරණ වල සමහර HTML5 සංරචක සෑම බ්‍රව්සරයකම නොමැති බැවින් ගූගල් ක්‍රෝම් සමඟ එය උත්සාහ කරන්න .

2019 යාවත්කාලීන කිරීම: එය තවමත් ඔබගේ ජන විකාශන භාවිතයන් මත ඇති බ්‍රව්සර් මත රඳා පවතී .

"නව" HTML5 fileAPI සමඟ තේරුම් ගත යුතු වැදගත් දෙයක් නම් IE 10 වන තෙක් එයට සහාය නොදැක්වීමයි . ඔබ අරමුණු කරන නිශ්චිත වෙළඳපල වින්ඩෝස් හි පැරණි අනුවාදයන් කෙරෙහි සාමාන්‍යයට වඩා වැඩි ප්‍රවණතාවක් තිබේ නම්, ඔබට එයට ප්‍රවේශය නොමැති විය හැකිය.

2017 වන විට, බ්‍රව්සර් වලින් 5% ක් පමණ IE 6, 7, 8 හෝ 9 න් එකකි. ඔබ විශාල සංස්ථාවකට පිවිසෙන්නේ නම් (උදා: මෙය බී 2 බී මෙවලමක් හෝ ඔබ පුහුණුව සඳහා ලබා දෙන දෙයක්) එම සංඛ්‍යාව අහස උසට නැඟිය හැකිය . 2016 දී මම IE8 භාවිතා කරන සමාගමක් සමඟ ඔවුන්ගේ යන්ත්‍රවලින් 60% කට වඩා ගනුදෙනු කළෙමි.

මගේ ආරම්භක පිළිතුරෙන් වසර 11 කට පමණ පසු මෙම සංස්කරණය වන විට එය 2019 වේ. IE9 සහ පහළ ගෝලීය වශයෙන් 1% සීමාව වටා ඇති නමුත් ඉහළ භාවිතයේ පොකුරු තවමත් පවතී.

මෙහි ඇති වැදගත්කම - විශේෂාංගය කුමක් වුවත්, ඔබේ පරිශීලකයින් භාවිතා කරන්නේ කුමන බ්‍රව්සරයද යන්න පරීක්ෂා කරන්න . ඔබ එසේ නොකරන්නේ නම්, සේවාදායකයෙකුට ලබා දිය හැකි “මා වෙනුවෙන් වැඩ කිරීම” ප්‍රමාණවත් නොවන්නේ මන්ද යන්න පිළිබඳ ඉක්මන් හා වේදනාකාරී පාඩමක් ඔබ ඉගෙන ගනු ඇත. කැනියුස් යනු ප්‍රයෝජනවත් මෙවලමක් වන නමුත් ඔවුන්ගේ සංඛ්‍යාලේඛන ලබා ගන්නේ කොහෙන්දැයි සටහන් කරන්න. ඔවුන් ඔබ සමඟ නොගැලපේ. ව්‍යවසාය පරිසරයන්ට වඩා මෙය කිසි විටෙකත් සත්‍ය නොවේ.

2008 සිට මගේ පිළිතුර පහත දැක්වේ.

කෙසේ වෙතත්, ගොනු උඩුගත කිරීමේ ශක්‍ය නොවන JS නොවන ක්‍රම තිබේ. ඔබට පිටුවේ iframe එකක් සෑදිය හැකිය (ඔබ CSS සමඟ සැඟවී ඇති) ඉන්පසු එම පෝරමය එම iframe වෙත පළ කිරීමට ඉලක්ක කරන්න. ප්‍රධාන පිටුව ගෙනයාමට අවශ්‍ය නැත.

එය "සැබෑ" තනතුරක් බැවින් එය සම්පූර්ණයෙන්ම අන්තර්ක්‍රියාකාරී නොවේ. ඔබට තත්වය අවශ්‍ය නම් එය සැකසීමට ඔබට සේවාදායක පැත්තක් අවශ්‍ය වේ. මෙය ඔබගේ සේවාදායකය මත පදනම්ව විශාල වශයෙන් වෙනස් වේ. ASP.NET සතුව වඩාත් හොඳ යාන්ත්‍රණ ඇත. PHP තැනිතලාව අසමත් නමුත් ඔබට පර්ල් භාවිතා කළ හැකිය එය වටා යාමට හෝ අපාචේ වෙනස් කිරීම් .

ඔබට බහු ගොනු උඩුගත කිරීම් අවශ්‍ය නම්, එක් එක් ගොනුව එකවර කිරීම වඩාත් සුදුසුය (උපරිම ගොනු උඩුගත කිරීමේ සීමාවන් ඉක්මවා යාම සඳහා). පළමු පෝරමය iframe වෙත පළ කරන්න, ඉහත සඳහන් දෑ භාවිතා කර එහි ප්‍රගතිය නිරීක්ෂණය කරන්න. එය අවසන් වූ පසු දෙවන පෝරමය iframe වෙත පළ කරන්න.

නැතහොත් ජාවා / ෆ්ලෑෂ් විසඳුමක් භාවිතා කරන්න. ඔවුන්ගේ තනතුරු සමඟ කළ හැකි දේ සම්බන්ධයෙන් ඔවුන් වඩාත් නම්‍යශීලී වේ ...

මේ සඳහා සියුම් උඩුගත කිරීමේ ප්ලගිනය භාවිතා කිරීම මම නිර්දේශ කරමි . ඔබේ JavaScriptකේතය වනුයේ:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

සටහන: මෙම පිළිතුර යල් පැන ගිය එකක් වන අතර දැන් XHR භාවිතයෙන් ගොනු උඩුගත කළ හැකිය.

ඔබට XMLHttpRequest (Ajax) භාවිතයෙන් ගොනු උඩුගත කළ නොහැක . ඔබට iframe හෝ Flash භාවිතයෙන් බලපෑම අනුකරණය කළ හැකිය. බලපෑම ලබා ගැනීම සඳහා ඔබේ ලිපිගොනු iframe හරහා පළ කරන විශිෂ්ට jQuery පෝරම ප්ලගිනය .

අනාගත පා .කයින් සඳහා ඔතා.

අසමමුහුර්ත ගොනු උඩුගත කිරීම

HTML5 සමඟ

FormData සහ ගොනු API සඳහා සහය දක්වන්නේ නම් (HTML5 විශේෂාංග දෙකම) ඔබට ක්‍රමවේදය භාවිතයෙන් jQuery සමඟ ගොනු උඩුගත කළ හැකිය .$.ajax()

ඔබට FormData නොමැතිව ලිපිගොනු යැවිය හැකි නමුත් XMLHttpRequest (Ajax) සමඟ යැවිය හැකි වන පරිදි ගොනු සැකසීමට ගොනු API තිබිය යුතුය .

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

ඉක්මන්, පිරිසිදු ජාවාස්ක්‍රිප්ට් සඳහා ( jQuery නැත ) උදාහරණයක් ලෙස " ෆෝම් ඩේටා වස්තුවක් භාවිතා කරමින් ලිපිගොනු යැවීම " බලන්න .

පසු බසින්න

HTML5 සහය නොදක්වන විට ( ගොනු API නැත ) එකම පිරිසිදු ජාවාස්ක්‍රිප්ට් විසඳුම ( ෆ්ලෑෂ් හෝ වෙනත් බ්‍රව්සර් ප්ලගිනයක් නොමැත) සැඟවුණු අයිෆ්‍රේම් තාක්‍ෂණය වන අතර එමඟින් XMLHttpRequest වස්තුව භාවිතා නොකර අසමමුහුර්ත ඉල්ලීමක් අනුකරණය කිරීමට ඉඩ ලබා දේ .

එය ගොනු ආදාන සමඟ පෝරමයේ ඉලක්කය ලෙස iframe සැකසීම සමන්විත වේ. පරිශීලකයා ඉදිරිපත් කළ විට ඉල්ලීමක් කර ලිපිගොනු උඩුගත කරන නමුත් ප්‍රධාන පිටුව නැවත විදැහුම් කිරීම වෙනුවට ප්‍රතිචාරය iframe තුළ දර්ශනය වේ. Iframe සැඟවීම මඟින් සමස්ත ක්‍රියාවලියම පරිශීලකයාට විනිවිද පෙනෙන අතර අසමමුහුර්ත ඉල්ලීමක් අනුකරණය කරයි.

නිසියාකාරව සිදු කළ හොත් එය ඕනෑම බ්‍රව්සරයක පාහේ ක්‍රියා කළ යුතුය, නමුත් අයිෆ්‍රේම් වෙතින් ප්‍රතිචාරය ලබා ගන්නේ කෙසේද යන්න පිළිබඳව එය සතුව ඇත.

මෙම අවස්ථාවේ දී ඔබ හා සමාන දවටනය ප්ලගිනය භාවිතා කිරීමට කැමති විය හැක බයිෆෝර්ස්ට් එම යොදා ගන්නා iframe තාක්ෂණය පමණක් නොව, ලබා jQuery Ajax ප්රවාහන ඉඩ ගොනු යැවීමට පමණක් සමඟ $.ajax()මේ වගේ ක්රමය:

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

ප්ලගීන

Bifröst යනු jQuery හි අජැක්ස් ක්‍රමයට පසුබැසීමේ සහය එක් කරන කුඩා එතුමකි, නමුත් ඉහත සඳහන් කළ ප්ලගීන බොහෝමයක් jQuery ෆෝම් ප්ලගිනය හෝ jQuery ගොනු උඩුගත කිරීම ඇතුළත් වේ. ඔබගේ අවශ්‍යතා සහ අවශ්‍යතා මත පදනම්ව ඔබට යන්තම් ක්‍රියාත්මක කිරීමක් හෝ මෙම ප්ලගීන සලකා බැලීමට අවශ්‍ය විය හැකිය.

මෙම AJAX ගොනුව උඩුගත කිරීම jQuery ප්ලගිනය ගොනුව යම් දුරකට උඩුගත කරන අතර ප්‍රතිචාරය ඇමතුමකට යවයි, වෙන කිසිවක් නැත.

• එය විශේෂිත HTML මත රඳා නොපවතී, එය ලබා දෙන්න <input type="file">
• ඔබේ සේවාදායකයාට කිසියම් විශේෂිත ආකාරයකින් ප්‍රතිචාර දැක්වීම අවශ්‍ය නොවේ
• ඔබ කොපමණ ගොනු භාවිතා කරනවාද යන්න හෝ ඒවා පිටුවේ කොතැනද යන්න ගැටළුවක් නොවේ

- තරම් සුළු ප්‍රමාණයක් භාවිතා කරන්න -

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

- හෝ තරම් -

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

මම පහත ස්ක්‍රිප්ට් එක භාවිතා කර ඇත්තේ හොඳට වැඩ කරන පින්තූර උඩුගත කිරීමට ය.

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

ජාවාස්ක්‍රිප්ට්

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    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];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

පැහැදිලි කිරීම

මම ප්‍රතිචාරය භාවිතා කරමි divඋඩුගත කරන ලද සජීවිකරණය පෙන්වීමට .

හොඳම දෙය නම් ඔබ මෙම ස්ක්‍රිප්ට් එක භාවිතා කරන විට ගොනුව සමඟ ids & etc වැනි අමතර දත්ත යැවිය හැකිය. extra-dataපිටපතෙහි මෙන් මම එය සඳහන් කර ඇත්තෙමි .

PHP මට්ටමින් මෙය සාමාන්‍ය ගොනු උඩුගත කිරීමක් ලෙස ක්‍රියා කරයි. අමතර දත්ත දත්ත ලෙස ලබා ගත හැකිය $_POST.

මෙන්න ඔබ ප්ලගිනයක් සහ දේවල් භාවිතා නොකරයි. ඔබට අවශ්‍ය පරිදි කේතය වෙනස් කළ හැකිය. ඔබ මෙහි අන්ධ ලෙස කේත කරන්නේ නැත. ඕනෑම jQuery ගොනු උඩුගත කිරීමක මූලික ක්‍රියාකාරිත්වය මෙයයි. ඇත්තටම ජාවාස්ක්‍රිප්ට්.

ඔබට එය වැනිලා ජාවාස්ක්‍රිප්ට් වලින් පහසුවෙන් කළ හැකිය. මෙන්න මගේ වර්තමාන ව්‍යාපෘතියේ කුඩා කොටසක්:

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    var percent = (e.position/ e.totalSize);
    // Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
    if(this.readyState === 4) {
        // Handle file upload complete
    }
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);

ඔබට jQuery සමඟ සරලව උඩුගත කළ හැකිය .ajax().

HTML:

<form id="upload-form">
    <div>
        <label for="file">File:</label>
        <input type="file" id="file" name="file" />
        <progress class="progress" value="0" max="100"></progress>
    </div>
    <hr />
    <input type="submit" value="Submit" />
</form>

CSS

.progress { display: none; }

ජාවාස්ක්‍රිප්ට්:

$(document).ready(function(ev) {
    $("#upload-form").on('submit', (function(ev) {
        ev.preventDefault();
        $.ajax({
            xhr: function() {
                var progress = $('.progress'),
                    xhr = $.ajaxSettings.xhr();

                progress.show();

                xhr.upload.onprogress = function(ev) {
                    if (ev.lengthComputable) {
                        var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                        progress.val(percentComplete);
                        if (percentComplete === 100) {
                            progress.hide().val(0);
                        }
                    }
                };

                return xhr;
            },
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data, status, xhr) {
                // ...
            },
            error: function(xhr, status, error) {
                // ...
            }
       });
    }));
});

අතීතයේ දී මම මෙය කළ සරලම හා වඩාත්ම ශක්තිමත් ක්‍රමය නම්, ඔබේ පෝරමය සමඟ සැඟවුණු iFrame ටැගයක් ඉලක්ක කර ගැනීමයි - එවිට එය පිටුව නැවත පූරණය නොකර iframe තුළ ඉදිරිපත් කරනු ඇත.

එනම් ඔබට ප්ලගිනයක්, ජාවාස්ක්‍රිප්ට් හෝ HTML හැර වෙනත් "මැජික්" භාවිතා කිරීමට අවශ්‍ය නැතිනම්. ඇත්ත වශයෙන්ම ඔබට මෙය ජාවාස්ක්‍රිප්ට් සමඟ ඒකාබද්ධ කළ හැකිය හෝ ඔබ සතුව ඇත්තේ කුමක්ද ...

<form target="iframe" action="" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

<iframe name="iframe" id="iframe" style="display:none" ></iframe>

ඔබට onLoadසේවාදායක දෝෂ හෝ සාර්ථක ප්‍රතිචාර සඳහා iframe හි අන්තර්ගතය කියවා පරිශීලකයාට ප්‍රතිදානය කළ හැකිය.

Chrome, iFrames, සහ onLoad

-note- ඔබට උඩුගත කිරීම / බාගත කිරීම සිදු කරන විට UI අවහිර කරන්නෙකු සකසන්නේ කෙසේද යන්න ගැන ඔබ උනන්දුවක් දක්වන්නේ නම් පමණක් කියවීම දිගටම කරගෙන යා යුතුය

දැනට ක්‍රෝම් ලිපිගොනු මාරු කිරීමට භාවිතා කරන විට අයිෆ්‍රේම් සඳහා ඔන්ලෝඩ් සිදුවීම අවුලුවන්නේ නැත. ෆයර්ෆොක්ස්, අයිඊ, සහ එජ් යන සියල්ලම ගොනු මාරුවීම් සඳහා වන පැටවීමේ සිදුවීම ගිනි තබයි.

ක්‍රෝම් සඳහා මා සොයාගත් එකම විසඳුම වූයේ කුකියක් භාවිතා කිරීමයි.

උඩුගත කිරීම / බාගැනීම ආරම්භ කරන විට මූලික වශයෙන් එය කිරීමට:

• [සේවාලාභී පැත්ත] කුකියක පැවැත්ම සොයා ගැනීමට පරතරයක් ආරම්භ කරන්න
• [සේවාදායක පැත්ත] ගොනු දත්ත සමඟ ඔබට අවශ්‍ය ඕනෑම දෙයක් කරන්න
• [සේවාදායක පැත්ත] සේවාදායක පාර්ශවයේ කාල පරතරය සඳහා කුකියක් සකසන්න
• [සේවාලාභී පැත්ත] අන්තරය කුකිය දකින අතර එය ඔන්ලෝඩ් සිදුවීම මෙන් භාවිතා කරයි. උදාහරණයක් ලෙස ඔබට UI අවහිර කරන්නෙකු ආරම්භ කළ හැකි අතර පසුව පැටවීම (හෝ කුකී සෑදූ විට) ඔබ UI අවහිර කරන්නා ඉවත් කරයි.

මේ සඳහා කුකියක් භාවිතා කිරීම කැත නමුත් එය ක්‍රියාත්මක වේ.

බාගත කිරීමේදී ක්‍රෝම් සඳහා මෙම ගැටළුව විසඳීම සඳහා මම jQuery ප්ලගිනයක් සාදන ලදී, ඔබට මෙහි සොයාගත හැකිය

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

උඩුගත කිරීම සඳහා ද එකම මූලික විදුහල්පති අදාළ වේ.

බාගැනීම භාවිතා කිරීමට (පැහැදිලිවම JS ඇතුළත් කරන්න)

 $('body').iDownloader({
     "onComplete" : function(){
          $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
     }
 });

 $('somebuttion').click( function(){
      $('#uiBlocker').css('display', 'block'); //block the UI
      $('body').iDownloader('download', 'htttp://example.com/location/of/download');
 });

සේවාදායක පැත්තේ, ගොනු දත්ත මාරු කිරීමට පෙර, කුකිය සාදන්න

 setcookie('iDownloader', true, time() + 30, "/");

ප්ලගිනය මඟින් කුකිය දකිනු ඇත, පසුව onCompleteඇමතුම් ආපසු ලබා දේ.

මා සොයාගත් විසඳුමක් වූයේ <form>ඉලක්කය සැඟවුණු අයිෆ්‍රේම් එකක් තිබීමයි. අයිෆ්‍රේම් හට JS ධාවනය කර එය සම්පූර්ණ බව පරිශීලකයාට පෙන්විය හැකිය (පිටු පැටවීමේදී).

මම මෙය ලියා ඇත්තේ රේල්ස් පරිසරයක ය . ඔබ සැහැල්ලු jQuery ආකෘති ප්ලගිනය භාවිතා කරන්නේ නම් එය ජාවාස්ක්‍රිප්ට් පේළි පහක් පමණ වේ.

අභියෝගය වන්නේ සම්මතයට remote_form_forබහු-කොටස් ආකෘති ඉදිරිපත් කිරීම නොතේරෙන බැවින් AJAX උඩුගත කිරීම වැඩ කිරීමයි . රේල්ස් විසින් AJAX ඉල්ලීම සමඟ ආපසු ගොනු ලිපිගොනු යැවීමට යන්නේ නැත.

JQuery- ආකෘති ප්ලගිනය ක්‍රියාත්මක වන්නේ එතැනිනි.

මෙන්න ඒ සඳහා රේල්ස් කේතය:

<% remote_form_for(:image_form, 
                   :url => { :controller => "blogs", :action => :create_asset }, 
                   :html => { :method => :post, 
                              :id => 'uploadForm', :multipart => true }) 
                                                                        do |f| %>
 Upload a file: <%= f.file_field :uploaded_data %>
<% end %>

ආශ්‍රිත ජාවාස්ක්‍රිප්ට් මෙන්න:

$('#uploadForm input').change(function(){
 $(this).parent().ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = 'json';
  },
  complete: function(XMLHttpRequest, textStatus) {
   // XMLHttpRequest.responseText will contain the URL of the uploaded image.
   // Put it in an image element you create, or do with it what you will.
   // For example, if you have an image elemtn with id "my_image", then
   //  $('#my_image').attr('src', XMLHttpRequest.responseText);
   // Will set that image tag to display the uploaded image.
  },
 });
});

මෙන්න රේල්ස් පාලක ක්‍රියාව, ලස්සන වැනිලා:

 @image = Image.new(params[:image_form])
 @image.save
 render :text => @image.public_filename

මම පසුගිය සති කිහිපය තුළ බ්ලොග්ගිටි සමඟ මෙය භාවිතා කර ඇති අතර එය ශූරයකු මෙන් ක්‍රියා කරයි.

සරල අජැක්ස් උඩුගත කරන්නා තවත් විකල්පයකි:

https://github.com/LPology/Simple-Ajax-Uploader

• හරස් බ්‍රව්සරය - IE7 +, ෆයර්ෆොක්ස්, ක්‍රෝම්, සෆාරි, ඔපෙරා හි ක්‍රියා කරයි
• බහු, සමගාමී උඩුගත කිරීම් සඳහා සහය දක්වයි - HTML5 නොවන බ්‍රව්සර්වල පවා
• ෆ්ලෑෂ් හෝ බාහිර CSS නැත - එක් 5Kb ජාවාස්ක්‍රිප්ට් ගොනුවක් පමණි
• සම්පුර්ණ හරස් බ්‍රව්සර් ප්‍රගති තීරු සඳහා විකල්ප, සාදන ලද සහාය (PHP හි APC දිගුව භාවිතා කරමින්)
• නම්‍යශීලී සහ අතිශයින්ම රිසිකරණය කළ හැකි - ඕනෑම අංගයක් උඩුගත කිරීමේ බොත්තමක් ලෙස භාවිතා කරන්න, ඔබේම ප්‍රගති දර්ශක මෝස්තර කරන්න
• පෝරම අවශ්‍ය නොවේ, උඩුගත කිරීමේ බොත්තම ලෙස ක්‍රියා කරන අංගයක් පමණක් සපයන්න
• MIT බලපත්‍රය - වාණිජ ව්‍යාපෘති සඳහා භාවිතා කිරීමට නොමිලේ

උදාහරණ භාවිතය:

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

jQuery Uploadify යනු ගොනු උඩුගත කිරීමට පෙර මා භාවිතා කළ තවත් හොඳ ප්ලගිනයකි. ජාවාස්ක්‍රිප්ට් කේතය පහත පරිදි සරල ය: කේතය. කෙසේ වෙතත්, නව අනුවාදය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හි ක්‍රියා නොකරයි.

$('#file_upload').uploadify({
    'swf': '/public/js/uploadify.swf',
    'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
    'cancelImg': '/public/images/uploadify-cancel.png',
    'multi': true,
    'onQueueComplete': function (queueData) {
        // ...
    },
    'onUploadStart': function (file) {
        // ...
    }
});

මම බොහෝ සෙවීම් කර ඇති අතර කිසිදු ප්ලගිනයකින් තොරව ලිපිගොනු උඩුගත කිරීම සඳහා වෙනත් විසඳුමක් වෙත පැමිණ ඇති අතර අජැක්ස් සමඟ පමණි. විසඳුම පහත පරිදි වේ:

$(document).ready(function () {
    $('#btn_Upload').live('click', AjaxFileUpload);
});

function AjaxFileUpload() {
    var fileInput = document.getElementById("#Uploader");
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append("files", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'Uploader.ashx');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
             alert('success');
        }
        else if (uploadResult == 'success')
            alert('error');
    };
    xhr.send(fd);
}

ගොනුව උඩුගත කරන්නේ කෙසේද යන්න පිළිබඳ තවත් විසඳුමක් මෙන්න ( කිසිදු ප්ලගිනයක් නොමැතිව )

සරල ජාවාස්ක්‍රිප්ට් සහ අජැක්ස් භාවිතා කිරීම (ප්‍රගති තීරුව සමඟ)

HTML කොටස

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

JS කොටස

function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

PHP කොටස

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads'
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

මෙන්න EXAMPLE යෙදුම

var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);

$.ajax({
    url:"page.php",
    data:formData,
    type: 'POST',
    dataType:"JSON",
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){ }
});

පින්තූර ඇතුළුව ඔබගේ සියලු අගයන් පළ කිරීමට ඔබට පෝරම දත්ත භාවිතා කළ හැකිය.

Jquery සමඟ අසමමුහුර්තව ගොනුව උඩුගත කිරීමට පහත පියවර භාවිතා කරන්න:

පියවර 1 ඔබේ ව්‍යාපෘතියේ දී නුජෙට් කළමණාකරු විවෘත කර පැකේජය එක් කරන්න (jquery fileupload (ඔබට එය සෙවුම් කොටුවේ ලිවීමට අවශ්‍ය නම් එය පැමිණ එය ස්ථාපනය කරනු ඇත.)) URL: https://github.com/blueimp/jQuery-File- උඩුගත කරන්න

පියවර 2 ඉහත පැකේජය ක්‍රියාත්මක කිරීමෙන් දැනටමත් ව්‍යාපෘතියට එකතු කර ඇති HTML ලිපිගොනු වල පහත ස්ක්‍රිප්ට් එක් කරන්න:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

පියවර 3 පහත කේතයට අනුව ගොනු උඩුගත කිරීමේ පාලනය ලියන්න:

<input id="upload" name="upload" type="file" />

පියවර 4 පහත පරිදි උඩුගත ගොනුව ලෙස js ක්‍රමයක් ලියන්න:

 function uploadFile(element) {

            $(element).fileupload({

                dataType: 'json',
                url: '../DocumentUpload/upload',
                autoUpload: true,
                add: function (e, data) {           
                  // write code for implementing, while selecting a file. 
                  // data represents the file data. 
                  //below code triggers the action in mvc controller
                  data.formData =
                                    {
                                     files: data.files[0]
                                    };
                  data.submit();
                },
                done: function (e, data) {          
                   // after file uploaded
                },
                progress: function (e, data) {

                   // progress
                },
                fail: function (e, data) {

                   //fail operation
                },
                stop: function () {

                  code for cancel operation
                }
            });

        };

පියවර 5 පහත දැක්වෙන පරිදි ක්‍රියාවලිය ආරම්භ කිරීම සඳහා සූදානම් ක්‍රියාකාරී ඇමතුම් මූලද්‍රව්‍ය ගොනු උඩුගත කිරීම:

$(document).ready(function()
{
    uploadFile($('#upload'));

});

පියවර 6 පහත පරිදි MVC පාලකය සහ ක්‍රියාව ලියන්න:

public class DocumentUploadController : Controller
    {       

        [System.Web.Mvc.HttpPost]
        public JsonResult upload(ICollection<HttpPostedFileBase> files)
        {
            bool result = false;

            if (files != null || files.Count > 0)
            {
                try
                {
                    foreach (HttpPostedFileBase file in files)
                    {
                        if (file.ContentLength == 0)
                            throw new Exception("Zero length file!");                       
                        else 
                            //code for saving a file

                    }
                }
                catch (Exception)
                {
                    result = false;
                }
            }


            return new JsonResult()
                {
                    Data=result
                };


        }

    }

නවීන ප්රවේශය jQuery තොරව භාවිතා කිරීමට FileList ඔබ ආපසු ලබා ගන්නා වස්තුව <input type="file">පරිශීලක ගොනු (ව) තෝරා ගන්න කොට පසුව භාවිතා Fetch මෙම FileList පළ කිරීමට වටේ එතිලා FormData වස්තුව.

// The input DOM element // <input type="file">
const inputElement = document.querySelector('input[type=file]');

// Listen for a file submit from user
inputElement.addEventListener('change', () => {
    const data = new FormData();
    data.append('file', inputElement.files[0]);
    data.append('imageName', 'flower');

    // You can then post it to your server.
    // Fetch can accept an object of type FormData on its  body
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    });
});

ඔබ demo වැඩ සහිත විසඳා විසඳුමක් දැකිය හැකි මෙහි ඔබ විසින් සේවාදායකය වෙත ආකෘති පත්රය ගොනු පෙරදසුන් ඉදිරිපත් කිරීමට ඉඩ සලසා දෙන. ඔබගේ නඩුව සඳහා, සේවාදායකයට ගොනු උඩුගත කිරීම පහසු කිරීම සඳහා ඔබ අජැක්ස් භාවිතා කළ යුතුය:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

ඉදිරිපත් කරන දත්ත ආකෘති පත්‍රයකි. ඔබගේ jQuery හි, පහත දැක්වෙන පරිදි පෝරම ගොනුව ඉදිරිපත් කිරීම සඳහා බොත්තමක් ක්ලික් කිරීම වෙනුවට පෝරම ඉදිරිපත් කිරීමේ ශ්‍රිතයක් භාවිතා කරන්න.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

වැඩි විස්තර බලන්න

නියැදිය: ඔබ jQuery භාවිතා කරන්නේ නම්, ඔබට උඩුගත කළ ගොනුවකට පහසුවෙන් කළ හැකිය. මෙය කුඩා හා ශක්තිමත් jQuery ප්ලගිනයකි, http://jquery.malsup.com/form/ .

උදාහරණයක්

var $bar   = $('.ProgressBar');
$('.Form').ajaxForm({
  dataType: 'json',

  beforeSend: function(xhr) {
    var percentVal = '0%';
    $bar.width(percentVal);
  },

  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    $bar.width(percentVal)
  },

  success: function(response) {
    // Response
  }
});

එය ප්‍රයෝජනවත් වනු ඇතැයි මම බලාපොරොත්තු වෙමි

ඔයාට පාවිච්චි කරන්න පුළුවන්

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

නිරූපණය

| HTML5 හි readAsDataURL () හෝ සමහර base64 එන්කෝඩරය භාවිතයෙන් ගොනුව base64 වෙත පරිවර්තනය කරන්න . ෆිද්ල් මෙතන

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

පසුව ලබා ගැනීමට:

window.open("data:application/octet-stream;base64," + base64);

XMLHttpRequest (ෆ්ලෑෂ් සහ අයිෆ්‍රේම් පරායත්තතාවයකින් තොරව) භාවිතා කර අසමමුහුර්ත උඩුගත කිරීම සඳහා ඔබට ගොනුවේ නම සමඟ අමතර පරාමිතීන් ලබා දිය හැකිය. FormData සමඟ අතිරේක පරාමිති අගය එකතු කර උඩුගත කිරීමේ ඉල්ලීම යවන්න.

var formData = new FormData();
formData.append('parameter1', 'value1');
formData.append('parameter2', 'value2'); 
formData.append('file', $('input[type=file]')[0].files[0]);

$.ajax({
    url: 'post back url',
    data: formData,
// other attributes of AJAX
});

එසේම, සමමුහුර්තකරණය ජාවාස්ක්‍රිප්ට් යූඅයි ගොනු උඩුගත කිරීම සිදුවීම් තර්කය භාවිතා කරමින් මෙම අවස්ථාව සඳහා විසඳුමක් සපයයි. ඔබට මෙහි ප්‍රලේඛන සොයාගත හැකි අතර මෙම පාලනය පිළිබඳ වැඩි විස්තර මෙහි සබැඳි විස්තරය ඇතුළත් කරන්න

සමමුහුර්තව මෙහි ඇති ගොනුවක් සඳහා උඩුගත කිරීමේ ක්‍රියාවලිය හැසිරවීම සඳහා බලන්න : https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

සබැඳියෙන් නියැදිය

<?php
if (isset($_FILES['myFile'])) {
    // Example:
    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    exit;
}
?><!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>

මෙය මගේ විසඳුමයි.

<form enctype="multipart/form-data">    

    <div class="form-group">
        <label class="control-label col-md-2" for="apta_Description">Description</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
        </div>
    </div>

    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

සහ ජේ

<script>

    $(':button').click(function () {
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: '@Url.Action("Save", "Home")',  
            type: 'POST',                
            success: completeHandler,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });    

    function completeHandler() {
        alert(":)");
    }    
</script>

පාලකය

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    [...]
}

HTML5 සහ JavaScript භාවිතා කිරීම, අසින්ක් උඩුගත කිරීම තරමක් පහසුය, මම ඔබේ HTML සමඟ උඩුගත කිරීමේ තර්කනය නිර්මාණය කරමි, මෙය api අවශ්‍ය බැවින් එය සම්පූර්ණයෙන්ම ක්‍රියාත්මක නොවේ, නමුත් එය ක්‍රියා කරන ආකාරය නිරූපණය /uploadකරන්න, ඔබේ වෙබ් අඩවියේ මුල සිට කැඳවූ අන්ත ලක්ෂ්‍යය ඔබට තිබේ නම් , මෙම කේතය ඔබ වෙනුවෙන් වැඩ කළ යුතුය:

const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("file uploaded");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}

<form>
  <span>File</span>
  <input type="file" id="file" name="file" size="10" />
  <input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>

XMLHttpReques පිළිබඳ තවත් තොරතුරු:

XMLHttpRequest වස්තුව

සියලුම නවීන බ්‍රව්සර් XMLHttpRequest වස්තුවට සහය දක්වයි. XMLHttpRequest වස්තුව තිරය පිටුපස වෙබ් සේවාදායකයක් සමඟ දත්ත හුවමාරු කර ගැනීමට භාවිතා කළ හැකිය. මෙයින් අදහස් කරන්නේ මුළු පිටුවම නැවත පූරණය නොකර වෙබ් පිටුවක කොටස් යාවත්කාලීන කළ හැකි බවයි.

XMLHttpRequest වස්තුවක් සාදන්න

සියලුම නවීන බ්‍රව්සර් (ක්‍රෝම්, ෆයර්ෆොක්ස්, අයිඊ 7 +, එජ්, සෆාරි, ඔපෙරා) තුළ XMLHttpRequest වස්තුවක් ඇත.

XMLHttpRequest වස්තුවක් නිර්මාණය කිරීම සඳහා සින්ටැක්ස්:

විචල්‍යය = නව XMLHttpRequest ();

වසම් හරහා ප්‍රවේශ වන්න

ආරක්ෂක හේතූන් මත, නවීන බ්‍රව්සර් වසම් හරහා ප්‍රවේශ වීමට ඉඩ නොදේ.

මෙයින් අදහස් කරන්නේ වෙබ් පිටුව සහ එය පූරණය කිරීමට උත්සාහ කරන XML ගොනුව එකම සේවාදායකයක පිහිටා තිබිය යුතු බවයි.

W3Schools හි ඇති උදාහරණ W3Schools වසමේ පිහිටා ඇති සියලුම විවෘත XML ගොනු.

ඉහත උදාහරණය ඔබේම වෙබ් පිටුවක භාවිතා කිරීමට ඔබට අවශ්‍ය නම්, ඔබ පටවන XML ගොනු ඔබේම සේවාදායකයේ තිබිය යුතුය.

වැඩි විස්තර සඳහා, ඔබට මෙහි දිගටම කියවිය හැකිය ...

ඔබට ජාවාස්ක්‍රිප්ට් මඟින් නවතම Fetch API භාවිතා කළ හැකිය . මෙවැනි:

function uploadButtonCLicked(){
    var input = document.querySelector('input[type="file"]')

    fetch('/url', {
      method: 'POST',
      body: input.files[0]
    }).then(res => res.json())   // you can do something with response
      .catch(error => console.error('Error:', error))
      .then(response => console.log('Success:', response));
}                               

වාසිය: Fetch API සියලු නවීන බ්‍රව්සර් මගින් දේශීයව සහාය දක්වයි , එබැවින් ඔබට කිසිවක් ආනයනය කිරීමට අවශ්‍ය නැත. තවද, ලබා ගැනීම () විසින් පොරොන්දුවක් ලබා දෙන අතර එය .then(..code to handle response..)අසමමුහුර්තව භාවිතා කිරීමෙන් හසුරුවනු ලැබේ .

ඔබට ජාවාස්ක්‍රිප්ට් හෝ jQuery භාවිතයෙන් අසමමුහුර්ත බහු ගොනු උඩුගත කිරීම් කළ හැකි අතර කිසිදු ප්ලගිනයක් භාවිතා නොකර එය කළ හැකිය. ප්‍රගති පාලනයේදී ගොනු උඩුගත කිරීමේ තත්‍ය කාලීන ප්‍රගතිය ඔබට පෙන්විය හැකිය. මට ලස්සන සබැඳි 2 ක් හමු වී ඇත -

1. ප්‍රගති තීරුව සමඟ ASP.NET වෙබ් පෝරම පදනම් කරගත් බහු ගොනු ගොනු උඩුගත කිරීමේ විශේෂාංගය
2. ASP.NET MVC මත පදනම් වූ බහුවිධ ගොනු උඩුගත කිරීම jQuery වලින් සාදා ඇත

සේවාදායක පාර්ශවීය භාෂාව C # වන නමුත් PHP වැනි වෙනත් භාෂාවක් සමඟ ක්‍රියා කිරීම සඳහා ඔබට යම් වෙනස් කිරීමක් කළ හැකිය.

ගොනු උඩුගත කිරීම ASP.NET Core MVC:

HTML හි View create file file upload control:

<form method="post" asp-action="Add" enctype="multipart/form-data">
    <input type="file" multiple name="mediaUpload" />
    <button type="submit">Submit</button>
</form>

දැන් ඔබේ පාලකයේ ක්‍රියාකාරී ක්‍රමයක් සාදන්න:

[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
    //looping through all the files
    foreach (IFormFile file in mediaUpload)
    {
        //saving the files
        string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); 
        using (var stream = new FileStream(path, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }
    }
}

සත්කාරක පාරිසරික විචල්‍යය IHostingEn Environment වර්ගයට අයත් වන අතර එය යැපුම් එන්නත් භාවිතයෙන් පාලකයට එන්නත් කළ හැකිය.

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}

PHP සඳහා, https://developer.hyvor.com/php/image-upload-ajax-php-mysql සඳහා බලන්න

HTML

<html>
<head>
    <title>Image Upload with AJAX, PHP and MYSQL</title>
</head>
<body>
<form onsubmit="submitForm(event);">
    <input type="file" name="image" id="image-selecter" accept="image/*">
    <input type="submit" name="submit" value="Upload Image">
</form>
<div id="uploading-text" style="display:none;">Uploading...</div>
<img id="preview">
</body>
</html>

ජාවාස්ක්‍රිප්ට්

var previewImage = document.getElementById("preview"),  
    uploadingText = document.getElementById("uploading-text");

function submitForm(event) {
    // prevent default form submission
    event.preventDefault();
    uploadImage();
}

function uploadImage() {
    var imageSelecter = document.getElementById("image-selecter"),
        file = imageSelecter.files[0];
    if (!file) 
        return alert("Please select a file");
    // clear the previous image
    previewImage.removeAttribute("src");
    // show uploading text
    uploadingText.style.display = "block";
    // create form data and append the file
    var formData = new FormData();
    formData.append("image", file);
    // do the ajax part
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var json = JSON.parse(this.responseText);
            if (!json || json.status !== true) 
                return uploadError(json.error);

            showImage(json.url);
        }
    }
    ajax.open("POST", "upload.php", true);
    ajax.send(formData); // send the form data
}

PHP

<?php
$host = 'localhost';
$user = 'user';
$password = 'password';
$database = 'database';
$mysqli = new mysqli($host, $user, $password, $database);


 try {
    if (empty($_FILES['image'])) {
        throw new Exception('Image file is missing');
    }
    $image = $_FILES['image'];
    // check INI error
    if ($image['error'] !== 0) {
        if ($image['error'] === 1) 
            throw new Exception('Max upload size exceeded');

        throw new Exception('Image uploading error: INI Error');
    }
    // check if the file exists
    if (!file_exists($image['tmp_name']))
        throw new Exception('Image file is missing in the server');
    $maxFileSize = 2 * 10e6; // in bytes
    if ($image['size'] > $maxFileSize)
        throw new Exception('Max size limit exceeded'); 
    // check if uploaded file is an image
    $imageData = getimagesize($image['tmp_name']);
    if (!$imageData) 
        throw new Exception('Invalid image');
    $mimeType = $imageData['mime'];
    // validate mime type
    $allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!in_array($mimeType, $allowedMimeTypes)) 
        throw new Exception('Only JPEG, PNG and GIFs are allowed');

    // nice! it's a valid image
    // get file extension (ex: jpg, png) not (.jpg)
    $fileExtention = strtolower(pathinfo($image['name'] ,PATHINFO_EXTENSION));
    // create random name for your image
    $fileName = round(microtime(true)) . mt_rand() . '.' . $fileExtention; // anyfilename.jpg
    // Create the path starting from DOCUMENT ROOT of your website
    $path = '/examples/image-upload/images/' . $fileName;
    // file path in the computer - where to save it 
    $destination = $_SERVER['DOCUMENT_ROOT'] . $path;

    if (!move_uploaded_file($image['tmp_name'], $destination))
        throw new Exception('Error in moving the uploaded file');

    // create the url
    $protocol = stripos($_SERVER['SERVER_PROTOCOL'],'https') === true ? 'https://' : 'http://';
    $domain = $protocol . $_SERVER['SERVER_NAME'];
    $url = $domain . $path;
    $stmt = $mysqli -> prepare('INSERT INTO image_uploads (url) VALUES (?)');
    if (
        $stmt &&
        $stmt -> bind_param('s', $url) &&
        $stmt -> execute()
    ) {
        exit(
            json_encode(
                array(
                    'status' => true,
                    'url' => $url
                )
            )
        );
    } else 
        throw new Exception('Error in saving into the database');

} catch (Exception $e) {
    exit(json_encode(
        array (
            'status' => false,
            'error' => $e -> getMessage()
        )
    ));
}

Https://uppy.io වැනි දෙයක් භාවිතා කිරීම ගැනද ඔබට සලකා බැලිය හැකිය .

එය පිටුවෙන් සැරිසැරීමකින් තොරව ගොනු උඩුගත කිරීම සිදු කරන අතර ඇදගෙන යාම සහ අතහැර දැමීම, බ්‍රව්සර් බිඳවැටීම් / දෝෂ සහිත ජාල වලදී උඩුගත කිරීම් නැවත ආරම්භ කිරීම සහ උදා: ඉන්ස්ටග්‍රෑම් වෙතින් ආනයනය කිරීම වැනි ප්‍රසාද දීමනා කිහිපයක් ඉදිරිපත් කරයි. එය විවෘත මූලාශ්‍රයක් වන අතර එය jQuery / ප්‍රතික්‍රියා / කෝණික / Vue මත රඳා නොපවතින නමුත් එය සමඟ භාවිතා කළ හැකිය. වියාචනය: එහි නිර්මාතෘවරයා ලෙස මම පක්ෂග්‍රාහී ය;)