上传图片时显示gif加载程序

时间:2015-12-29 15:28:05

标签: jquery html css html5 css3

我有一个表单,我通过浏览按钮上传文件(图像)。 我希望在用户从他/她的系统浏览任何图像时点击上传按钮时显示加载程序。

我不知道如何让它发挥作用。 这是我的代码。

<div style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 1.5em;">
        <div>
            <p>
                <label for="flUpload" id="lblInstructions"><span class="QLabel" id="lblInstruction">Click the first button below to find your file. After selecting the file, click <b>Upload</b>.</span></label></p>
            <input type="file" id="flUpload" name="flUpload">
            <input type="hidden" id="hdnFileStub" name="hdnFileStub">
            <input type="hidden" id="HdnFileName" name="HdnFileName">
            <input type="hidden" value="4e7263a4-472b-4ad8-9e9e-79612053a13a" id="hdnQuestionStub" name="hdnQuestionStub">
            <p><span style="padding: 2 0; color: Red" id="ErrMessage"></span></p>
        </div>
        <div style="margin-top: 15px; text-align: center">
            <input type="submit" class="srFormButton" id="btnUpload" value="Upload" name="btnUpload">
        </div>
    </div>

谢谢,

2 个答案:

答案 0 :(得分:2)

form包裹输入,然后执行以下操作。希望这会对你有所帮助。

<强> CSS

.loader {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1000;
    background: #fcfcfc url("http://www.mvgen.com/loader.gif") no-repeat scroll center center / 120px 120px;
    top: 0;
    left: 0;
    opacity: 0.5;
}

<强> JQUERY

$("form").on('submit', function(e) {
    e.preventDefault;
    var formData = new FormData(this);

   if ($('.loader').length > 0) {
      $('body').append('<div class="loader"></div>'); //add loader if not exist
   } else {
      $('.loader').show(); // show loader
   }

   $.ajax({
       url: "/Home/Upload", //your url here
       type: "POST",
       data: formData,
       cache: false,
       contentType: false,
       processType: false,
       success: function(data) {
            $('.loader').hide(); //hide loader
            console.log(data);
       }
   });
});

答案 1 :(得分:0)

您可以使用iframe。基本上,这应该工作:

(SELECT column_name FROM user_tab_columns WHERE table_name = 'PEOPLEINFO' and data_type = 'DATE')