使用具有不同id句柄的元素使用Ajax上载图像

时间:2013-06-25 13:41:15

标签: php jquery ajax

我有上传图片的问题。 我想使用一个脚本通过不同的HTML元素上传图像。以下是我的HTML。

<div id="upload_1" class="image_upload" onclick="loadimg_new(this)">
<span id="uploadbutton_1" style="display:block"><?php echo Upload; ?></span>
<img id="loading_1" style="display:none;" src="images/uploading.gif" />
</div>

<div id="upload_2" class="image_upload" onclick="loadimg_new(this)">
<span id="uploadbutton_2" style="display:block"><?php echo Upload; ?></span>
<img id="loading_2" style="display:none;" src="images/uploading.gif" />
</div>

使用上传脚本时

<script type="text/javascript" src="script/ajaxupload.3.5.js" ></script>
<script type="text/javascript">
function loadimg_new(obj)
{

    var uploadId = obj.id;
    var imgFieldNameArray = uploadId.split('_');
    var imgFieldName = imgFieldNameArray[1];

    new AjaxUpload(uploadId, 
    {

        action: 'ajaximage.php?img_id='+window.uploadId,
        name: 'uploadfile',


        onSubmit: function(file, ext)
        {
             if (! (ext && /^(jpg|png|jpeg|gif|docx|doc|xls|xlsx|ppt|pptx)$/.test(ext)))
             { 
                alert('Only JPG, PNG, GIF, DOC, XLS or PPT files are allowed');
                return false;
            }

            document.getElementById('uploadbutton_'+imgFieldNameArray[1]).style.display = "none";
            document.getElementById('loading_'+imgFieldNameArray[1]).style.display = "block";

        },
        onComplete: function(file, response)
        {
            document.getElementById('uploadbutton_'+imgFieldNameArray[1]).style.backgroundColor="#000000"
            document.getElementById('uploadbutton_'+imgFieldNameArray[1]).innerHTML = "Uploaded";
            document.getElementById('uploadbutton_'+imgFieldNameArray[1]).style.display = "block";
            document.getElementById('loading_'+imgFieldNameArray[1]).style.display = "none";
            var imageName = response;
            if(response=='error')
            {
                alert('ERROR-Failed to upload file. Try again.');
            }
            else
            {
                document.getElementById('myimage_'+imgFieldName).value = imageName;
            }
        }
    });

}

这是正常工作但第一次双击以运行上传脚本。 我想将ID传递给ajaxuploading函数dynamic.So我能够在'upload_1'或'upload_2'上运行此脚本,依此类推。

0 个答案:

没有答案