Asp.net mvc 以所见即所得方式从本地计算机上载图像

如何将图像从本地计算机上传到TinyMCE的最佳方式是什么？我找到了，但它是否只适合drupal？我需要的解决方案将与asp.net MVC3的工作。然后我找到了这个，但我想要没有silverlight的解决方案。我的选择是什么？哪一个是最好的？

！！！！享受！！！以下是直接从本地计算机加载的解决方案

`tinymce.init({
选择器：“文本区域”，
工具栏：“我的按钮”，
身高：400，
设置：函数（编辑器）{
editor.addButton（'mybutton'{
文字：“图像”，
图标：false，
onclick：函数（e）{
log（$（e.target））；
if（$（e.target）.prop（“标记名”）==“按钮”）{
console.log（$（e.target）.parent（）.parent（）.find（'input'）.attr（'id'））；if（$（e.target）.parent（）.parent（）.find（'input'）.attr（'id'）！='tinymce uploader'）{
$（e.target.parent（）.parent（）.append（“”）；
}
$（'tinymce uploader'）。触发器（'click'）；
$（'#tinymce uploader'）.change（function（）{
var输入、文件、fr、img；
if（typeof window.FileReader！=“函数”）{
写入（“此浏览器尚不支持文件API。”）；
返回；
}
输入=document.getElementById（'tinymce-uploader'）；
如果（！输入）{
写（“嗯，找不到imgfile元素。”）；
}
如果（！input.files）{
写入（“此浏览器似乎不支持文件输入的`files`属性。”）；
}
如果（！input.files[0]），则为else{
写入（“请在单击“加载”之前选择一个文件”）；
}
否则{
file=input.files[0]；
fr=新文件读取器（）；
fr.onload=createImage；
fr.readAsDataURL（文件）；
}
函数createImage（）{
img=新图像（）；
img.src=fr.result；
编者。插入内容（“”）；
}
});
}
if（$（e.target）.prop（“标记名”）==“DIV”）{
if（$（e.target）.parent（）.find（'input'）.attr（'id'）！='tinymce uploader'）{
console.log（$（e.target）.parent（）.find（'input'）.attr（'id'））；
$（e.target）.parent（）.append（“”）；
}
$（'tinymce uploader'）。触发器（'click'）；
$（'#tinymce uploader'）.change（function（）{
var输入、文件、fr、img；
if（typeof window.FileReader！=“函数”）{
写入（“此浏览器尚不支持文件API。”）；
返回；
}
输入=document.getElementById（'tinymce-uploader'）；
如果（！输入）{
写（“嗯，找不到imgfile元素。”）；
}
如果（！input.files）{
写入（“此浏览器似乎不支持文件输入的`files`属性。”）；
}
如果（！input.files[0]），则为else{
写入（“请在单击“加载”之前选择一个文件”）；
}
否则{
file=input.files[0]；
fr=新文件读取器（）；
fr.onload=createImage；
fr.readAsDataURL（文件）；
}
函数createImage（）{
img=新图像（）；
img.src=fr.result；
编者。插入内容（“”）；
}
});
}
if（$（e.target）.prop（“标记名”）==“I”）{
console.log（$（e.target）.parent（）.parent（）.parent（）.find（$（输入））.attr（'id'）；if（$（e.target.parent（）.parent（）.parent（）.find（$（输入））.attr（'id'）！='tinymce uploader'）{$（e.target.parent（）.parent（）.parent（）.append（''）；
}
$（'tinymce uploader'）。触发器（'click'）；
$（'#tinymce uploader'）.change（function（）{
var输入、文件、fr、img；
if（typeof window.FileReader！=“函数”）{
写入（“此浏览器尚不支持文件API。”）；
返回；
}
输入=document.getElementById（'tinymce-uploader'）；
如果（！输入）{
写（“嗯，找不到imgfile元素。”）；
}
如果（！input.files）{
写入（“此浏览器似乎不支持文件输入的`files`属性。”）；
}
如果（！input.files[0]），则为else{
写入（“请在单击“加载”之前选择一个文件”）；
}
否则{
file=input.files[0]；
fr=新文件读取器（）；
fr.onload=createImage；
fr.readAsDataURL（文件）；
}
函数createImage（）{
img=新图像（）；
img.src=fr.result；
编者。插入内容（“”）；
}
});
}
}
});
}});

---

`！！！！享受！！！以下是直接从本地计算机加载的解决方案

`tinymce.init({
选择器：“文本区域”，
工具栏：“我的按钮”，
身高：400，
设置：函数（编辑器）{
editor.addButton（'mybutton'{
文字：“图像”，
图标：false，
onclick：函数（e）{
log（$（e.target））；
if（$（e.target）.prop（“标记名”）==“按钮”）{
console.log（$（e.target）.parent（）.parent（）.find（'input'）.attr（'id'））；if（$（e.target）.parent（）.parent（）.find（'input'）.attr（'id'）！='tinymce uploader'）{
$（e.target.parent（）.parent（）.append（“”）；
}
$（'tinymce uploader'）。触发器（'click'）；
$（'#tinymce uploader'）.change（function（）{
var输入、文件、fr、img；
if（typeof window.FileReader！=“函数”）{
写入（“此浏览器尚不支持文件API。”）；
返回；
}
输入=document.getElementById（'tinymce-uploader'）；
如果（！输入）{
写（“嗯，找不到imgfile元素。”）；
}
否则，如果（！in
`tinymce.init({
selector: "textarea",
toolbar: "mybutton",
height:400,
setup: function(editor) {
    editor.addButton('mybutton', {
        text:"IMAGE",
        icon: false,
        onclick: function(e) {
            console.log($(e.target));
            if($(e.target).prop("tagName") == 'BUTTON'){
            console.log($(e.target).parent().parent().find('input').attr('id'));                    if($(e.target).parent().parent().find('input').attr('id') != 'tinymce-uploader') {
            $(e.target).parent().parent().append('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
                }
            $('#tinymce-uploader').trigger('click');
            $('#tinymce-uploader').change(function(){
             var input, file, fr, img;

        if (typeof window.FileReader !== 'function') {
            write("The file API isn't supported on this browser yet.");
            return;
        }

        input = document.getElementById('tinymce-uploader');
        if (!input) {
            write("Um, couldn't find the imgfile element.");
        }
        else if (!input.files) {
            write("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
            write("Please select a file before clicking 'Load'");
        }
        else {
            file = input.files[0];
            fr = new FileReader();
            fr.onload = createImage;
            fr.readAsDataURL(file);
        }

        function createImage() {
            img = new Image();
            img.src = fr.result;
             editor.insertContent('<img src="'+img.src+'"/>');

        }

            });

        }
        if($(e.target).prop("tagName") == 'DIV'){
        if($(e.target).parent().find('input').attr('id') != 'tinymce-uploader') {
        console.log($(e.target).parent().find('input').attr('id'));                                
            $(e.target).parent().append('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
                         }
            $('#tinymce-uploader').trigger('click');
            $('#tinymce-uploader').change(function(){
             var input, file, fr, img;

        if (typeof window.FileReader !== 'function') {
            write("The file API isn't supported on this browser yet.");
            return;
        }

        input = document.getElementById('tinymce-uploader');
        if (!input) {
            write("Um, couldn't find the imgfile element.");
        }
        else if (!input.files) {
            write("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
            write("Please select a file before clicking 'Load'");
        }
        else {
            file = input.files[0];
            fr = new FileReader();
            fr.onload = createImage;
            fr.readAsDataURL(file);
        }

        function createImage() {
            img = new Image();
            img.src = fr.result;
             editor.insertContent('<img src="'+img.src+'"/>');

        }

            });

        }
        if($(e.target).prop("tagName") == 'I'){
        console.log($(e.target).parent().parent().parent().find('input').attr('id')); if($(e.target).parent().parent().parent().find('input').attr('id') != 'tinymce-uploader') {               $(e.target).parent().parent().parent().append('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
                                                                                       }
            $('#tinymce-uploader').trigger('click');
            $('#tinymce-uploader').change(function(){
             var input, file, fr, img;

        if (typeof window.FileReader !== 'function') {
            write("The file API isn't supported on this browser yet.");
            return;
        }

        input = document.getElementById('tinymce-uploader');
        if (!input) {
            write("Um, couldn't find the imgfile element.");
        }
        else if (!input.files) {
            write("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
            write("Please select a file before clicking 'Load'");
        }
        else {
            file = input.files[0];
            fr = new FileReader();
            fr.onload = createImage;
            fr.readAsDataURL(file);
        }

        function createImage() {
            img = new Image();
            img.src = fr.result;
             editor.insertContent('<img src="'+img.src+'"/>');

        }

            });

        }

        }
    });
}});

setup: function (editor) {
            editor.addButton('mybutton', {
                text: "Image",
                icon: false,
                onclick: function (e) {
                    if ($(e.target).prop("tagName") == 'BUTTON') {
                        if ($(e.target).parent().parent().find('input').attr('id') != 'tinymce-uploader') {
                            $(e.target).parent().parent().append('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
                        }

                        $('#tinymce-uploader').trigger('click');

                        $('#tinymce-uploader').change(changeImage);

                        function changeImage () {
                            var input, file, fr, img;

                            if (typeof window.FileReader !== 'function') {
                                write("The file API isn't supported on this browser yet.");
                                return;
                            }

                            input = document.getElementById('tinymce-uploader');
                            if (!input) {
                                write("Um, couldn't find the imgfile element.");
                            }
                            else if (!input.files) {
                                write("This browser doesn't seem to support the `files` property of file inputs.");
                            }
                            else if (!input.files[0]) {
                                write("Please select a file before clicking 'Load'");
                            }
                            else {
                                file = input.files[0];
                                fr = new FileReader();
                                fr.onload = createImage;
                                fr.readAsDataURL(file);
                            }

                            function createImage() {
                                img = new Image();
                                img.src = fr.result;                                    
                                var image = editor.dom.create('img', { src: img.src }, "");
                                editor.selection.setNode(image);

                            }
                            $('#tinymce-uploader').unbind("change", changeImage);
                        }

                    }                    

                }
            });
        }