我有一个表单,其中有几个必填字段(姓名,电话号码,
- 是否可以在选择后立即上传此文件而无需提交表单?(它与其他字段驻留在同一个元素中。
- 在上传文件的同时提交了整个表格,该如何处理?我对PHP还远远不够熟练,所以…它不会打碎什么东西吗?
非常感谢!
这是一个简洁的函数,您可以使用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对象。
希望你一切顺利,
祝你好运!