图片上传并且支持预览

首先这里先讲一个比较low的

<input type="file" id="file1" οnchange="preview1()"/>
    <img src="" id="img1" alt="图片预览" width="200"/>
    </div>
    </form>
    <script type="text/javascript">
        function preview1() {
            var x = document.getElementById("file1");
            var y = document.getElementById("img1");
            if (!x || !x.value)
                return;
            //这里正则表达式中test()方法总是不存在！
           /* var path = "//.jpeg$/.jpg$/.png$/.gif/i";
            if (path.test(x.value)) {
                y.src = "file://localhost/" + x.value;
            } else {
                alert("图片格式好像不正确！");
            }*/

            if (x.value.indexOf(".jpg") < 0 && x.value.indexOf(".jpeg") < 0 && x.value.indexOf(".gif") < 0 && x.value.indexOf(".png") < 0) {
                alert("图片格式好像不正确！");
            } else {
               
                y.src = "file://localhost/" + x.value;
            }
        }
</script>

 

这样就可以预览上传的图片，但是如果图片没有加载出来 将会有有一个死图在那里，不是很美观，所以下面我用XHTML 如下：

<form id="form"  >
        <input type="file" id="file"οnchange="preview()" /></form>
<script type="text/javascript">
    function preview() {
        var x = document.getElementById("file");
        if (!x || !x.value) return;
        if (x.value.indexOf(".jpg") < 0 && x.value.indexOf(".jpeg") < 0 && x.value.indexOf(".gif") < 0 && x.value.indexOf(".png") < 0) {
            alert("图片格式好像不正确！");
        } else {
                var img = document.createElement('img');
                img.setAttribute('src', 'file://localhost/' + x.value);
                img.setAttribute('width', '120');
                img.setAttribute('height', '90');
                img.setAttribute('id', 'img');
                document.getElementById('form').appendChild(img);
            }
    }
</script>

如果用正则表达式会很方便，但是我还不太会，只知道这个东西的存在，我会在后续更新关于正则表达式的学习。