Upload of Ajax without refreshing new files

No nonsense, direct focus:

1: Four JS libraries are required for preparation.

1. jquery 8 or later versions

2. jquery. UI. widget. js

3. jquery. iframe-transport.js.

4. jquery. fileupload. js

Note that references must be done in sequence,

2: HTML must contain an upload tag, which can be copied directly to an HTML file as follows.

<Input id = "fileupload" type = "file" name = "files []" data-url = "@ URL. Action (" Upload "," home ")" multiple>

Data-URL is the upload service path, which can be modified as needed

 

3: Start upload

<script>    $(function () {        $(‘#fileupload‘).fileupload({            dataType: ‘text‘,            add: function (e, data) {                data.context = $(‘<p/>‘).text(‘Uploading...‘).appendTo(document.body);                data.submit();            },            progressall: function (e, data) {                var progress = parseInt(data.loaded / data.total * 100, 10);                $(‘#progress .bar‘).css(                    ‘width‘,                    progress + ‘%‘                );            },            done: function (e, data) {                //$.each(data.result.files, function (index, file) {                $(‘#imgDialog img‘).attr(‘src‘, data.result);                //});                $(img).attr(‘src‘, data.result);            }        });    });</script>

Different parameters indicate different events during the upload process. The code above requires a div with a progress bar.

<Div id = "progress">
<Div class = "bar" style = "width: 0%;"> </div>
</Div>

Upload of Ajax without refreshing new files