我一直在使用以下方式使用手机的相机拍摄照片并将其显示在网页上：

 < input type =fileid =fileInputaccept =image / *onchange =inputFileChanged（）; /&GT; 
< img alt =图片src =Content / 1.jpgid =imgDisplay/> 
< script type =text / javascript> 

函数inputFileChanged（）{
 // alert（Input File Changed）; 
 var files = document.getElementById（fileInput）。files; 

 if（window.FileReader）{//检查浏览器 - 是否支持文件读取器？ 
 // alert（reader OK）; 
 loadImageFile（files）; 
} 
 else {
 alert（不支持文件读取器）; 
} 
} 

函数loadImageFile（files）{
 if（files&& files.length）{
 var reader = new FileReader ）; 
 reader.onload =（function（theImageElement）{
 return function（e）{
 // alert（reader loaded）; 
 theImageElement.src = e.target。 （$ imgDisplay））; 
 reader.onerror = function（e）{
 alert（error+ e.target.error.code）; 
} 
 reader.readAsDataURL（files [0]）; 
} else {
 alert（no file）; 
} 
} 
< / script> 
 

在iPhone Safari iOS8上，返回错误代码4（NOT_READABLE_ERR）。
这是一个已知的错误（应该在下一个版本解决）。

没有问题（到目前为止）与iPhone iOS8上的Chrome

I have a form that has file selector. <input type="file" ... Run the code snippet below to see what it does.

On Safari on iOS8 there is a known bug that means you cannot read file content with FileReader. This only happens on real hardware, the iOS simulator works fine.

On Chrome on iOS8 this code sometimes just completely crashes the browser.

I don't want to use agent sniffing to decide whether or not to attempt the function. Is there a better way to write this so that I can gracefully degrade to a simpler version?

document.getElementById('files').addEventListener('change', handleFileSelect, false);

function handleFileSelect(evt) {
    var fileList = evt.target.files;
  
    for (var i = 0; i < fileList.length; i++) {
        loadFile(fileList[i]);
    }
}

function loadFile(file) {
    var reader = new FileReader();
    reader.onload = function (evt) {
        document.getElementById('list').innerHTML += "file loaded: " + evt.target.result;
    };

    reader.readAsDataURL(file); // broken in iOS8 && Safari
}

<h2>Choose 1 or more files</h2>

<input type="file" id="files" name="files[]" multiple="multiple" />

<h2>Loaded files will appear below:</h2>
<div id="list"></div>

It appears SO code snippets don't work on iOS so if you want to run the code, I've copied it to jsbin here: http://jsbin.com/zuyeteheroga/3/edit?html,js,output

I have been using the following to take a picture using the phone's camera and display it on the web page:

<input type="file" id="fileInput" accept="image/*" onchange="inputFileChanged();" />
<img alt="The Picture" src="Content/1.jpg" id="imgDisplay" />
<script type="text/javascript">

    function inputFileChanged() {
        //alert("Input File Changed");
        var files = document.getElementById("fileInput").files;

        if (window.FileReader) { //Check browser - does it support File Reader?
            //alert("reader OK");
            loadImageFile(files);
        }
        else {
            alert("File Reader not Supported");
        }
    }

    function loadImageFile(files) {
        if (files && files.length) {
            var reader = new FileReader();
            reader.onload = (function (theImageElement) {
                return function (e) {
                    //alert("reader loaded");
                    theImageElement.src = e.target.result;
                }
            })(document.getElementById("imgDisplay"));
            reader.onerror = function (e) {
                alert("error " + e.target.error.code);
            }
            reader.readAsDataURL(files[0]);
        } else {
            alert("no file");
        }
    }
</script>

On iPhone Safari iOS8, error code 4 (NOT_READABLE_ERR) is returned. This is a known bug (supposed to be resolved on next release).

No problems (so far) with Chrome on iPhone iOS8