如何使用ajax显示上传的图像？

Question

我需要上传图片并显示该图片，而无需重新加载页面。如何实现此目的。 我认为我们可以使用Ajax表单提交来做到这一点。 我尝试了以下代码，但Ajax表单提交功能不起作用。 这段代码有什么错误告诉我如何实现

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
        <script src="http://malsup.github.com/jquery.form.js"></script> 
        <script type="text/javascript">
            $(document).ready(function()
            {
              $('#myForm').ajaxForm(function()
                 { 
                    alert("Thank you for your comment!"); 
                }); 

            });
    </script>

    <body>
        <form id="myForm" action="" method="post"> 
          <input type="file" name="image_name" id="image_name" >
       </form>
    </body>

谢谢：-）

Answer 1

使用uploadify插件进行类似的操作，我通过ajax进行了uplaod图片处理，将文件上传到uploadAllComlete函数中后，将图片tage src设置为通过上传文件存储在服务器上的url，完成了：

 <input type="file" name="fileUpload" value="" id="fileInput1" /> 
                 <p><a href="javascript:$('#fileInput1').uploadifyUpload();">Upload Files</a></p>

这是javascript函数：

<script type="text/javascript">


    $("#fileInput1").uploadify({
        'uploader': '@Url.Content("~/Scripts/jquery.uploadify-v2.1.4/uploadify.swf")',
        'script': '@Url.Content("~/Resource/Upload")',
        'auto': false,
        'multi': false,
        'expressInstall': '@Url.Content("~/Scripts/jquery.uploadify-v2.1.4/expressInstall.swf")',
        'cancelImg': '@Url.Content("~/Scripts/jquery.uploadify-v2.1.4/cancel.png")',
        'scriptAccess': 'always',
        'hideButton': false,
        'fileTypeDesc': 'Image Files',
        'fileTypeExts': ' *.jpg; *.png',
        'fileDataName': 'uploadedFile',
        'sizeLimit': 1000000000,
        'onError': function (event, ID, fileObj, errorObj) {
            $('#UploadedPicture').val('');
            $('#uploadedImage').attr('src', '');
            $('#uploadedImage').hide();
            //alert("name: " + fileObj.name + " error type: " + errorObj.type + ", info: " + errorObj.info);
        },
        'onAllComplete': function (event, data) {
            //alert("allcomplete => " + data.filesUploaded + ":" + data.errors + ":" + data.allBytesLoaded + ":" + data.speed);
        },
        'onCheck': function () {
            //alert("oncheck");
        },
        'onComplete': function (event, id, fileObj, response, data) {

            //alert("oncomplete => " + ":" + fileObj.name + ":" + fileObj.filePath + ":" + fileObj.size + ":" + response);
            $('#fileInput2').val(fileObj.name);
            $('#uploadedImage').attr('src', '/uploads/' + fileObj.name);


        },
        'onOpen': function (event, id, fileObj) {
            //alert("onopen => " + ":" + fileObj.name + ":" + fileObj.filePath + ":" + fileObj.size);
            var temp = fileObj.name.split('(');
            var filename = $.trim(temp[0]);
            $('#UploadedPicture').val('~/uploads/' + filename);
            $('#uploadedImage').attr('src', '/uploads/' + filename);
            $('#uploadedImage').show();
        },
        'onProgress': function (event, id, fileObj, data) {
            //alert("onprogress => " + ":" + fileObj.name + ":" + fileObj.filePath + ":" + fileObj.size + ":" + data.percentage + ":" + data.bytesLoaded + ":" + data.allBytesLoaded + ":" + data.speed);
        },
        'onUploadSuccess': function (file, data, response) { alert('test'); $('#fileInput2').val(file.name); },
        'onUploadComplete': function (file) {
            //alert('The file ' + file.name + ' finished processing.');
        },
        'onCancel': function (file) {
            $('#UploadedPicture').val('');
            $('#uploadedImage').attr('src', '');
            $('#uploadedImage').hide();
        }
    });

    </script>

这是我发布文件的服务器端功能：

public ActionResult Upload(HttpPostedFileBase uploadedFile)
        {
            if (uploadedFile.ContentLength == 0) return new EmptyResult();

            string[] temp = uploadedFile.FileName.Split('(');
            string FileName = temp[0].Trim();
            string savedFileName = Path.Combine(HttpContext.Server.MapPath("~/Uploads"), uploadedFile.FileName);
            uploadedFile.SaveAs(savedFileName);

            return new EmptyResult();
        }

Answer 2

由于您使用的是JQuery-form插件，因此可以发送图像。 您的代码是正确的，但是有一些小错误。

您必须调用ajaxForm的Submit方法来进行ajax调用，并且需要向AjaxForm的complete事件添加回调。（这里，我添加了onchange事件，因此，仅当用户选择图像时，，那么就会触发ajax调用。）

这有效-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    //Added an onchange event.
    $("#image_name").on('change',function(){
        $("#myForm").ajaxForm(
            {complete:  function(data){
                             alert("Thank you for your comment!");
                        }
            }
        ).submit();
    });
});
</script>

<body>
    <form id="myForm" action="a.php" method="post">
        <input type="file" name="image_name" id="image_name" >
    </form>
</body>

Answer 3

我用它来使用ajax上传图像

$(document).ready(function() {
    var f = $('form');
    var l = $('#loader'); // loder.gif image
    var b = $('#button'); // upload button
    var p = $('#preview'); // preview area

    b.click(function(){
        // implement with ajaxForm Plugin
        f.ajaxForm({
            beforeSend: function(){
                l.show();
                b.attr('disabled', 'disabled');
                p.fadeOut();
            },
            success: function(e){
                l.hide();
                f.resetForm();
                b.removeAttr('disabled');
                p.html(e).fadeIn();
            },
            error: function(e){
                b.removeAttr('disabled');
                p.html(e).fadeIn();
            }
        });
    });
});

如何使用ajax显示上传的图像？

问题描述

3 个解决方案

解决方案1
2 2014-02-06 05:38:50

解决方案2
1 已采纳 2014-02-06 06:09:12

解决方案3
0 2014-02-06 05:38:38

如何使用ajax显示上传的图像？

问题描述

3 个解决方案

解决方案1 2 2014-02-06 05:38:50

解决方案2 1 已采纳 2014-02-06 06:09:12

解决方案3 0 2014-02-06 05:38:38

解决方案1
2 2014-02-06 05:38:50

解决方案2
1 已采纳 2014-02-06 06:09:12

解决方案3
0 2014-02-06 05:38:38