How to create Jquery FileUpload with ASP.NET C# included CRUD (not MVC)

Question

Hi I have saw a lot of documents on the google search and found many pages to discuss php / python (like jQuery File Upload Demo) etc.. However I didn't see anything about ASP.NET for C# or VB(not MVC),so anyone can help me to give me any slim clue, Hopefully give me full example code or reference URL that it is included CRUD, by the way I will be continuing search and try to deal with this issue

Ps: CRUD means to create/read/update/delete

I have tried this sample but I had get some error messages as following pictures

Console

NetWork

Peter Stark · Accepted Answer · 2017-03-23 06:52:43Z

3

Let's establish a common understanding.

CRUD = create read update delete
jquery fileupload -> file upload

Not sure what kind of CRUD operation do you require from jquery fileupload. Can you elaborate further on your requirement?

If you want some reference on how to use the plugin, perhaps this tutorial here - aspnet web form and jquery file upload will help.

Hope this helps.

answered Mar 23, 2017 at 6:52

Peter Stark

6084 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Willie Cheng Over a year ago

Hi@Sudarpo thanks for your feedback and I've tried it(tutorial here - aspnet web form and jquery file upload) in my environment ,but unfortunately it isn't work, hopefully you can give me whole example code if you have ,thanks

Peter Stark Over a year ago

Hi Willie.. There's a full solution in bottom page (under Wrapping up section). github link

Peter Stark Over a year ago

Can you take a look at NETWORK tab and see where it went wrong?

Peter Stark Over a year ago

@WillieCheng, did you try to upload any file? your "network" only showed traffic from BrowserLink. and it's hard to tell what's the problem if you don't share the code.

Willie Cheng Over a year ago

I copied source code from website and I rat it in my VS ,I didn't touch or change anything, and then I got error messages like you saw. by the way ,could you do me a favor to copy the source code and run it in your environment , hopefully you can see the same questions thanks a lot

|

RAJNIK PATEL · Accepted Answer · 2017-03-23 07:30:30Z

You can use this code for C# ASP.NET

JS Function

function SaveFiles() {

        var fileInput = document.getElementById('fileInput');
        var file = $("#fileInput").val();

        if (file.length > 0) {
            var fd = new FormData();
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/Admin/UploadImage');
            xhr.setRequestHeader('Content-type', 'multipart/form-data');

            //Appending file information in Http headers
            xhr.setRequestHeader('X-File-Name', fileInput.files[0].name);
            xhr.setRequestHeader('X-File-Type', fileInput.files[0].type);
            xhr.setRequestHeader('X-File-Size', fileInput.files[0].size);
            xhr.setRequestHeader['X-File-FileName', 1];
            xhr.setRequestHeader['X-File-Id', id];

            //Sending file in XMLHttpRequest
            xhr.send(fileInput.files[0]);
            xhr.onreadystatechange = function (data) {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    alert("Image Uploaded Successfully...");

                }
            }
        }
    }

C# Code

public JsonResult UploadImage()
        {
            string fileName = Request.Headers["X-File-Name"];
            string fileType = Request.Headers["X-File-Type"];
            int fileSize = Convert.ToInt32(Request.Headers["X-File-Size"]);

            System.IO.Stream fileContent = Request.InputStream;
            System.IO.FileStream fileStream = System.IO.File.Create(Server.MapPath("~/UploadImg/" + fileName));
            fileContent.Seek(0, System.IO.SeekOrigin.Begin);

            //Copying file's content to FileStream
            fileContent.CopyTo(fileStream);
            fileStream.Dispose();

            string FileName = Server.MapPath("~/UploadImg/" + fileName);

            //Here you can code for insert in database

            return Json(FileName);
        }

Hi @RAJNIK thank for your help,but I need to use JQuery File Upload to do my project , so do you have any idea for my problem ,thanks again

Willie Cheng · Accepted Answer · 2017-04-11 07:58:11Z

1

I have found my question and I've tried to fix my problem as following steps.
1. To modify url at the main.js

$(function () { 
    'use strict';
    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        url: 'server/******/'   // to your cs location
    });

2.To check all Css and JQuery that are address is okay to get script

answered Apr 11, 2017 at 7:58

Willie Cheng

8,36314 gold badges63 silver badges72 bronze badges

Collectives™ on Stack Overflow

How to create Jquery FileUpload with ASP.NET C# included CRUD (not MVC)

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related