1

我有一个包含几个必填字段（姓名、电话号码等）的表单和一个用于选择要提交的文件的字段。

  1. 是否可以在不提交表单的情况下选择它后立即上传此文件？（它与其他字段位于相同的元素中。
  2. 文件上传过程中同时提交整个表单的情况如何处理？我远非 PHP 熟练，所以......它不会破坏一些东西吗？

非常感谢！

4

1 回答 1

0

这是一个简洁的功能，您可以使用javascript来动态预览图像，而无需上传它们。我相信这是跨浏览器，但我无法 100% 确认。我很久以前就得到了这段代码，它最初不是由我编写的，但是我对其进行了一些修改以满足我的需要，其中包括 jQuery。如果您不在应用程序中使用 jQuery，那么您将不得不更改一些内容。无论如何，这是功能：

var loadImageFile = (function () {
    if (window.FileReader) {
        var oPreviewImg = null, oFReader = new window.FileReader(),
            rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
        var curImgPreview, curInput;

        oFReader.onload = function (oFREvent) {
            var tempImg = new Image();
            tempImg.onload = function(){
                curImgPreview.attr('src',oFREvent.target.result);
            }
            tempImg.src = oFREvent.target.result;
        };

        return function (inputOBJ, outputOBJ) {
            var aFiles = inputOBJ.files;
            curInput = $(inputOBJ);
            curImgPreview = outputOBJ;
            if (aFiles.length === 0) { return; }
            if (!rFilter.test(aFiles[0].type)) { Alert("Please select a valid image file."); return; }
            oFReader.readAsDataURL(aFiles[0]);
        }

    }
    if (navigator.appName === "Microsoft Internet Explorer") {
        return function () {
            otuputOBJ.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = inputOBJ.value;

        }
    }
})();

然后在您添加的文件类型的输入中

<input onchange='loadImageFile(this,$(HTMLimgObject))'/>

其中第二个参数是您要在其中预览图像文件的 img 对象。

希望你一切顺利，

祝你好运！

于 2013-06-09T22:37:10.380 回答