AJAX无刷新上传图片_PHP教程

    目录结构如下：

    其中files文件夹中存放上传来的图片。

    index.html代码如下：

立即学习“PHP免费学习笔记（深入）”；

<script type="text/javascript" src="http://<a%20style=" color: text-decoration:underline title="ajax" href="https://www.php.cn/zt/15849.html" target="_blank">ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

       
       
        上传

<script type="text/javascript"><br>$(function () {<br>    var bar = $('.bar');<br>    var percent = $('.percent');<br>    var showimg = $('#showimg');<br>    var progress = $(".progress");<br>    var files = $(".files");<br>    var btn = $(".btn span");<br>    $("p").wrap("<form id='myupload' action='action.php' method='post' enctype='multipart/form-data'>");<br>    $("#fileupload").change(function(){<br>        $("#myupload").ajaxSubmit({<br>            dataType:  'json',<br>            beforeSend: function() {<br>                showimg.empty();<br>                progress.show();<br>                var percentVal = '0%';<br>                bar.width(percentVal);<br>                percent.html(percentVal);<br>                btn.html("上传中...");<br>            },<br>            uploadProgress: function(event, position, total, percentComplete) {<br>                var percentVal = percentComplete + '%';<br>                bar.width(percentVal);<br>                percent.html(percentVal);<br>            },<br>            success: function(data) {<br>                files.html("<b>"+data.name+"("+data.size+"k) <span class='delimg' rel='"+data.pic+"'>删除");<br>                var img = "http://demo.helloweba.com/upload/files/"+data.pic;<br>                showimg.html("<img src='"+img+"' alt="AJAX无刷新上传图片_PHP教程" >");<br>                btn.html("添加附件");<br>            },<br>            error:function(xhr){<br>                btn.html("上传失败");<br>                bar.width('0')<br>                files.html(xhr.responseText);<br>            }<br>        });<br>    });<br>    <br>    $(".delimg").live('click',function(){<br>        var pic = $(this).attr("rel");<br>        $.post("action.php?act=delimg",{imagename:pic},function(msg){<br>            if(msg==1){<br>                files.html("删除成功.");<br>                showimg.empty();<br>                progress.hide();<br>            }else{<br>                alert(msg);<br>            }<br>        });<br>    });<br>});<br></script>

 

     jquery.form.js代码如下：

<span><span jquery form plugin version: v1.3.2 or later examples and documentation at: http: project repository: https: dual licensed under the mit gpl licenses:><span>
<span><span global activexobject alert><span><span><span function><span>"use strict"<span><span><span usage note: do not use both ajaxsubmit and ajaxform on the same form. these functions are mutually exclusive. if you want to bind your own submit handler for example function e.preventdefault important target: when plugin manage all event binding you. can also with delegation jquery v1.7 so form does have exist invoke ajaxform: delegation: true using will be invoked at appropriate time.><span>

<span><span feature detection><span>
<span var> feature =<span feature.fileapi>= $("<input type='file'/>").get(0).files !==<span undefined feature.formdata>= window.FormData !==<span undefined><span><span ajaxsubmit provides a mechanism for immediately submitting an html form using ajax.><span><span>= <span function><span><span><span jshint scripturl:true><span>

    <span><span fast fail if nothing selected>
    <span if> (!<span this><span .length log>'ajaxSubmit: skipping submit process - no element selected'<span><span return> <span this><span><span var> method, action, url, $form = <span this><span><span if> (<span typeof> options == 'function'<span options>=<span success: options method>= <span this>.attr('method'<span action>= <span this>.attr('action'<span url>= (<span typeof> action === 'string') ? $.trim(action) : ''<span url>= url || window.location.href || ''<span><span if><span><span><span clean url include hash vaue>
        url = (url.match(/^([^#]+)/)||[])[1<span options>= $.extend(<span true><span url: url success: type: method>|| 'GET'<span iframesrc:>/^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank'<span options><span><span hook for manipulating the form data before it is extracted>
    <span><span convenient for use with rich editors like tinymce or fckeditor>
    <span var> veto =<span><span this>.trigger('form-pre-serialize', [<span this><span options veto><span if><span log>'ajaxSubmit: submit vetoed via form-pre-serialize trigger'<span><span return> <span this><span><span><span provide opportunity to alter form data before it is serialized>
    <span if> (options.beforeSerialize && options.beforeSerialize(<span this>, options) === <span false><span log>'ajaxSubmit: submit aborted via beforeSerialize callback'<span><span return> <span this><span><span var> traditional =<span options.traditional><span if> ( traditional ===<span undefined traditional>=<span><span var> elements =<span><span var> qx, a = <span this><span .formtoarray elements><span if><span options.extradata>=<span options.data qx>=<span traditional><span><span give pre-submit callback an opportunity to abort the submit>
    <span if> (options.beforeSubmit && options.beforeSubmit(a, <span this>, options) === <span false><span log>'ajaxSubmit: submit aborted via beforeSubmit callback'<span><span return> <span this><span><span><span fire vetoable event>
    <span this>.trigger('form-submit-validate', [a, <span this><span options veto><span if><span log>'ajaxSubmit: submit vetoed via form-submit-validate trigger'<span><span return> <span this><span><span var> q =<span traditional><span if><span q>= ( q ? (q + '&' +<span qx :><span if> (options.type.toUpperCase() == 'GET'<span options.url>+= (options.url.indexOf('?') >= 0 ? '&' : '?') +<span q options.data>= <span null>;  <span><span data is null for>
<span><span else><span options.data>= q; <span><span data is the query string for>
<span><span var> callbacks =<span><span if><span callbacks.push><span function><span><span if><span callbacks.push><span function><span><span><span perform a load on the target only if datatype is not provided>
    <span if> (!options.dataType &&<span options.target><span var> oldSuccess = options.success || <span function><span callbacks.push><span function><span><span var> fn = options.replaceTarget ? 'replaceWith' : 'html'<span arguments><span else> <span if><span callbacks.push options.success>= <span function>(data, status, xhr) { <span><span jquery passes xhr as arg>
        <span var> context = options.context || <span this> ;    <span><span jquery supports scope context>
        <span for> (<span var> i=0, max=callbacks.length; i < max; i++<span callbacks status xhr>||<span><span><span are there files to upload>
    <span var> fileInputs = $('input:file:enabled[value]', <span this>); <span><span>
    <span var> hasFileInputs = fileInputs.length > 0<span><span var> mp = 'multipart/form-data'<span><span var> multipart = ($form.attr('enctype') == mp || $form.attr('encoding') ==<span mp><span var> fileAPI = feature.fileapi &&<span feature.formdata log>"fileAPI :" +<span fileapi><span var> shouldUseFrame = (hasFileInputs || multipart) && !<span fileapi><span><span options.iframe allows user to force iframe mode>
    <span><span now defaulting to iframe mode if file input is detected>
    <span if> (options.iframe !== <span false> && (options.iframe ||<span shoulduseframe><span><span hack to fix safari hang tim molendijk for this>
        <span><span see: http:>
        <span if><span><span function><span fileuploadiframe><span else><span fileuploadiframe><span else> <span if> ((hasFileInputs || multipart) &&<span fileapi fileuploadxhr><span else><span><span><span clear element array>
    <span for> (<span var> k=0; k < elements.length; k++<span elements>= <span null><span><span><span fire event>
    <span this>.trigger('form-submit-notify', [<span this><span options><span return> <span this><span><span><span utility fn for deep serialization>
    <span function><span deepserialize><span var> serialized = $.param(extraData).split('&'<span><span var> len =<span serialized.length><span var> result =<span><span var><span i part><span for> (i=0; i < len; i++<span part>= serialized[i].split('='<span result>0])] = decodeURIComponent(part[1<span><span return><span result><span><span xmlhttprequest level file uploads hat tip to francois2metz>
    <span function><span fileuploadxhr><span var> formdata = <span new><span formdata><span for> (<span var> i=0; i < a.length; i++<span formdata.append a><span if><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>