https://www.indieyork.co.uk/scripts/imageuploader.js

1var ImageUploader = function (element, callback, nameElement) {
2
3    this.element = element;
4    this.callback = callback;
5    this.nameElement = nameElement;
6};
7
8ImageUploader.prototype.Init = function (uploadUrl, previewUrl, buttonText, showPreview) {
9
10    var root = this;
11
12    $("<div></div>").appendTo(root.element.parent());
13    root.element.hide();
14
15    $("div", root.element.parent()).fineUploader({
16        request: {
17            endpoint: uploadUrl
18        },
19        multiple: false, /*debug: true,*/
20        dragAndDrop: {
21            disableDefaultDropzone: true
22        },
23        text: {
24            uploadButton: "Upload new image"
25        },
26        template: "<div class=\"thumb-container\"></div>" +
27            "<div class=\"qq-uploader\">" +
28            "<div class=\"qq-upload-button pull-left\" style=\"width: auto;\"><div class=\"btn btn-sm c1-bg c5-text\">" + buttonText + "</div></div>" +
29            "<span class=\"qq-drop-processing\"><span>{dropProcessingText}</span><span class=\"qq-drop-processing-spinner\"></span></span>" +
30            "<ul class=\"qq-upload-list pull-left\"></ul>" +
31            "</div>",
32        classes: {
33            success: "alert alert-success",
34            fail: "alert alert-error"
35        }
36    }).on("upload", function () {
37        $(".qq-upload-button", root.element.parent()).addClass("hidden");
38        $(".thumb-container img", root.element.parent()).addClass("hidden");
39        }).on("complete", function (event, id, name, response) {
40        root.element.val(response.Id);
41        $(".qq-upload-list", root.element.parent()).hide();
42            if (!showPreview) {
43                $(".thumb-container").addClass("hidden");
44            }
45            $(".thumb-container", root.element.parent()).html("<img class=\"img-responsive\" src=" + previewUrl + response.Id + "\" />");
46        $(".qq-upload-button", root.element.parent()).removeClass("hidden");
47
48        if (typeof (root.callback) === "function") {
49            root.callback();
50        }
51
52        if (root.nameElement !== null) {
53            var fileName = response.filename;
54            if (fileName.lastIndexOf(".") > -1) {
55                fileName = fileName.substr(0, fileName.lastIndexOf("."));
56            }
57            root.nameElement.val(response.filename);
58        }
59    });
60
61
62    if (root.element.length > 0 && root.element.val().length > 0) {
63        var imageId = Number(root.element.val());
64        if (imageId > 0) {
65            $(".thumb-container", root.element.parent()).html("<img class=\"img-responsive\" src=" + previewUrl + root.element.val() + "\" />");
66
67        }
68
69    }
70};